标签：
模仿时钟:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body> <input type="text" /> <button id="btn">点击发送短信</button> </body> </html> <script> var btn = document.getElementById("btn"); var count = 5; var timer = null;//把定时器的名字暂时以null代替以后,然后用于对变量重新赋值声明进行对其关闭操作. btn.onclick = function(){ clearInterval(timer);//每点击一次清除上一次已生效的点击事件重新执行 (避免多次点击) this.disabled = true;//打开不可点击 var that = this; //把指向当前事件对象指向声明变量名that上. timer = setInterval(sendMessage,1000); function sendMessage(){ count--; if (count >= 1) { that.innerHTML = "还剩余"+ count +"秒"; }else{ that.innerHTML = "点击重新发送短信"; that.disabled = false; clearInterval(timer); //每次执行完以后必须关闭之前的定时器 count = 5;//重新赋值 } } } </script>
PS:
不可点击:obj.disabled = disabled(或false) 的用法
arguments.callee :
返回正在执行的函数(代表函数本身).在函数体内使用.一般用于函数递归调用时.
function fn(){console.log(arguments.callee);}
这里的arguments.callee 就代表了 fn();
运算符:
逻辑运算符:
&& || !
&& : a && b : 解读: a为真则返回b,a为假则返回a本身.
|| : a || b : 解读: a为真则返回a本身,a为假则返回b.
! :逻辑非.
先后顺序优先级:
1: ( )
2: ! - ++ --
3: * / %
4: +－
5:< > <= >=
6:== != === !==
7:&&
8:||
9:三元运算符
10:= += /= *= %= -=
额外内容:
5秒跳转页面;
window.location.href = “http://”
setInterval和setTimeout 区别:
setIterval :几秒后重复执行方法,
setTimeout : 几秒过后执行一次方法.
转换为字符串:
1. + “” 2+ “” = “2” 2+”ab” = “2ab”
2. String() 转换为字符串
3. toString（基数） ; 基数就是进制
var txt = 10;
txt.toString(2) 二进制 1010
获取字符位置方法:
charAt，获取相应位置字符（参数： 字符位置）
charCodeAt获取相应位置字符unicode编码（参数： 字符位置）
var txt = “abcedf”;
比如， txt.charAt(4); 索引号一定是从0开始 返回的结果是 d
我们根据我们输入的 位数 返回相应的 字符 。
unicode编码 是我们字符的字符的唯一表示 。
小米页面自动上下拉动:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .xiaomi { width: 512px; height: 512px; border: 1px solid #f00; margin: 40px auto; overflow: hidden; position: relative; } .xiaomi span { position: absolute; left: 0; width: 100%; height: 256px; cursor: pointer; } .up { top: 0; } .down { bottom: 0; } #pic{ position: absolute; top: 0px; left: 0; } </style> </head> <body> <div class="xiaomi" id="box"> <img id="pic" src="mi.png" alt=""/> <span class="up"></span> <span class="down"></span> </div> </body> </html> <script> function $(id){ return document.getElementById(id);} var boxs = $("box").children; var num = 0; var timer = null; boxs[1].onmouseover = function(){ clearInterval(timer); timer = setInterval(span2,10); function span2(){ num += 3; if (num <= 0) { $("pic").style.top = num + "px"; }else{ clearInterval(timer); } } } boxs[2].onmouseover = function(){ clearInterval(timer); timer = setInterval(span1,10); function span1(){ num -= 3; if (num >= -958) { $("pic").style.top = num + "px"; }else{ clearInterval(timer); } } } $("pic").parentNode.onmouseout = function(){ clearInterval(timer); } </script>
关键核心:
定义坐标位置初始值为0;
定义定时器变量名作为关闭定时器的控制方式.
1 当鼠标经过发生事件时,应先清除上一次定时器执行过或正在执行的方法,(关闭定时器,清空函数),
2 计算图片的高度来确定不越界,不出界图片盒子外的值.
比如盒子宽高各为512px, 图片的长度为1470,那么就用 1470 - 512 = 958(下拉到盒子的最底部停止继续下拉,做到不越界,不出界)
code:
boxs[1].onmouseoverer = function(){ clearInterval(timer); timer = setInterval(span2,10); function span2(){ num += 3; if (num <= 0) { $("pic").style.top = num + "px"; }else{ clearInterval(timer); } } } boxs[2].onmouseover = function(){ clearInterval(timer); timer = setInterval(span1,10); function span1(){ num -= 3; if (num >= -958) { $("pic").style.top = num + "px"; }else{ clearInterval(timer); } } }
最后移除盒子外则关闭定时器:
以达到定在某个位置的做法.
code:
$("pic").parentNode.onmouseout = function(){
clearInterval(timer);
}
标签：
原文地址：http://www.cnblogs.com/Rimashuai/p/5785619.html
