点名系统
var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
var timer = null;
var arr = ['张三','李四','王五','刘二麻子','二狗','小明','隔壁老王'];
btns[0].onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
var randomNum = parseInt(Math.random() * arr.length);
oh1.innerHTML = arr[randomNum];
},10);
};
btns[1].onclick = function () {
clearInterval(timer);
}
重点: var randomNum = parseInt(Math.random() * arr.length);乘以数组的长度再用parseInt确保可以取到数组里的每一个数.
匀速动画
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
var begin = 0;
var target = 800;
var speed = 4;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
begin += speed;
if (begin >= target) {
clearInterval(timer);
begin = target;
}
box.style.left = begin + "px";
}, 10)
}
缓速动画
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
var start = 0;
var end = 800;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
start += Math.ceil((end - start ) / 15);
console.log(start);
if(start>=end){
start = end;
clearInterval(timer);
}
box.style.left = start + "px";
}, 50)
}
重点:start += Math.ceil((end - start ) / 15);其中15是系数,越小动的越快
长图展示
var pic = document.getElementById("pic");
var spans = document.getElementsByTagName("span");
var timer = null;
var speed = 10;
var topMargin = 0;
var target = -400;
spans[0].onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
topMargin += speed;
if (topMargin >= 0) {
clearInterval(timer);
topMargin = 0;
}
pic.style.top = topMargin + "px";
}, 10)
}
spans[1].onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
topMargin -= speed;
if (topMargin <= target) {
clearInterval(timer);
topMargin = target;
}
pic.style.top = topMargin + "px";
}, 10)
}
阴影展示
var box = document.getElementById("box");
var cover = document.getElementById("cover");
var timer = null;
var topSize = 200;
box.onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
topSize -= 4;
if(topSize<=0){
clearInterval(timer);
topSize = 0;
}
cover.style.top = topSize + "px";
},10);
}
页面跳转+递归函数
var oh6 = document.getElementById("oh6");
var count = 5;
var timer = setTimeout(function () {
clearTimeout(timer);
count--;
if (count < 1) {
window.location.href = "http://www.baidu.com";
}
else {
oh6.innerHTML = count + "秒以后跳转到指定页面";
}
timer = setTimeout(arguments.callee, 1000);
}, 1000)
重点:window.location.href = "http://www.baidu.com";:跳转目标地址.arguments.callee:在匿名函数内部找到函数本身,调用自己,简称递归,一次定时器的多次使用
线程:用来执行任务
队列:先进先出
高级轮播图
var spans = document.getElementsByTagName("span");
var pic = document.getElementById("pic");
var timer = null;
var beginLeft = 0;
var loop = 0;
var speed = 4;
var flag = false;
spans[1].onclick = function () {
if (flag == true) {
return;
}
flag = true;
clearInterval(timer);
loop++;
if (loop > 5) {
loop = 1;
beginLeft = 0;
}
timer = setInterval(function () {
beginLeft -= speed;
if (beginLeft <= -600 * loop) {
clearInterval(timer);
beginLeft = -600 * loop;
flag = false;
}
pic.style.left = beginLeft + "px";
}, 10)
}
spans[0].onclick = function () {
if (flag == true) {
return;
}
flag = true;
clearInterval(timer);
loop--;
if (loop < 1) {
loop = 4;
beginLeft = -600 * 5;
}
timer = setInterval(function () {
beginLeft += speed;
if (beginLeft >= -600 * loop) {
clearInterval(timer);
beginLeft = -600 * loop;
flag = false;
}
pic.style.left = beginLeft + "px";
}, 10)
}
重点:
-
cursor: pointer;:一个css属性,设置鼠标放上变为小手. - return的应用:设置一个标记,规定再图片过渡时点击span无效,赋给标记一个false,if判断当标记为true时,return,不执行后面的代码.第一次点击span时,值为false,if后面赋给标记一个true,执行定时器.再次点击span时,标记的值为true,return,不执行后面的代码.定时器自动运行,当达到条件,图片过渡完成到位时,返回给标记一个false,用于再次点击.
获取验证码
var btn = document.getElementById("btn");
var timer = null;
var num = 5;
btn.onclick = function () {
btn.disabled = true;
timer = setInterval(function () {
var dom = num--;
if (dom < 1) {
btn.disabled = false;
btn.innerHTML = "重新获取验证码";
num = 5;
clearInterval(timer);
}
else {
btn.innerHTML = dom + "秒后重新获取验证码";
}
}, 1000)
}
重点:
- btn.disabled = false;设置按钮不可点击,设置这个时就不用再设置清空定时器
- 定时器里的调用对象是window,所以在定时器里不能用this指向调用对象,如果要用就写备份指针
var that = this;,再写that.innerHTML.
栈区:存放指针
堆区:存放数据
