JavaScript学习系列（二）--定时器
2017-02-10 本文已影响19人
寒桥
本节内容
1.定时器的使用
2.数码时钟
3.延时提示框
4.无缝滚动
一、定时器的使用
两种定时器
-setInterval 间隔型
-setTimeout 延时型
两者区别：前者是无限次的执行 后者只执行一次
setInterval(参数1，参数2)第一个参数需要穿进去一个函数，第二个函数设置时间
代码示例--用两个按钮来控制定时器的使用
<script>
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null;
oBtn1.onclick = function () {
// 用timer变量存储这个定时器 就可以在关闭的方法中进行使用了
timer = setInterval(function () {
alert('a');
},1000)
}
oBtn2.onclick = function () {
clearInterval(timer)
}
}
</script>
<body>
<input id="btn1" type="button" value="开启">
<input id="btn2" type="button" value="关闭">
</body>
如果需要停止定时器则对应的方法是
停止定时器
- clearInterval
- clearTimeout
二、数码时钟
下边用Date对象和定时器做一个数码时钟，效果如下：
示例.png
整体的思路：
1.获取系统时间
- Date对象
- getHours()、getMinutes()、getSeconds()
- 年 getFullYear() 月 getMonth() 日 getDate() 星期 getDay()
2.显示系统时间
- 字符串连接
- 空位补零
3.通过更改图片的src来达到动态更换图片的目的
核心代码如下：
<script>
// 写一个将数字不成两位的方法 空位补零
function toDouble(n) {
if(n<10) {
return '0' + n;
} else {
return '' + n;
// 使用一个空字符串的目的是让返回结果保证是一个字符串
// 也同时保证了即使是一个两位数也不会出现相加的情况
}
}
window.onload = function () {
// 先获取元素
var aImg = document.getElementsByTagName('img');
// var str = '132321'; 用这种6位数的字符串一一对应
function tick() {
// Date()对象 获取时间 首先创建一个对象
var oDate = new Date();
// 拼出一个向上边的那种字符串
var str = toDouble(oDate.getHours()) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds());
for(var i=0; i < aImg.length; i++) {
aImg[i].src = 'img/'+str[i]+'.jpeg';
}
}
// 最后用一个定时器来让这个汇总表动起来
setInterval(tick,1000)
// 这时候会发现定时器会先出现初始的状态 然后才会开始正常计时,给人一种跳表的感觉,这是因为定时器函数是在1秒之后才开始执行
// 下边就来解决这种问题 将函数命名为tick 在onload函数中执行一次就行了
tick();
}
</script>
<body>
<label>:</label>
<label>:</label>
</body>
注意1：这里为了兼容性问题在IE7中str[i]是无法执行的因此考虑使用str.charAt[i]来代替str[i]这两者本身都是一个含义。
注意2：在日期对象中获取月份的时候，由于月份也是从0开始算，因此得到的月份会比实际的少一，因此在获取月份的时候需要特殊注意
<script>
var aDate = new Date();
alert(aDate.getMonth()+1);
</script>
三、延时提示框
需求：div1和div2，鼠标移入某个div上，div2不隐藏，移出div1和div2后，div2隐藏
<script>
window.onload = function () {
// 当鼠标移入的时候 显示div2 移出时延时消失
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
/*
oDiv1.onmouseover = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
};
oDiv1.onmouseout = function () {
// 延时消失
timer = setTimeout(function () {
oDiv2.style.display = 'none';
},500)
};
// 我们希望鼠标停在div2上的时候 div2能保持出现 那么就需要在div2上清除定时器
oDiv2.onmouseover = function () {
clearTimeout(timer);
};
// 下边我们仍是希望当鼠标从div2移除的时候消失 这时候还需要添加下边的方法
oDiv2.onmouseout = function () {
// 这时候我们仍发现一个问题 当鼠标快速移出div2的时候会闪一下 因为按照下边的代码的话,鼠标一离开div2,div2立即消失
// 要解决这个小问题 我们也给div2加一个定时器
timer = setTimeout(function () {
oDiv2.style.display = 'none';
},500);
// 这时移到div1上后 div2还是会消失 原因还是这个定时器,因此在移入div1的时候先进行移除定时器操作
}
*/
// 最后通过比对上边的代码 进行重复代码合并和简化
oDiv1.onmouseover = oDiv2.onmousemove = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
};
oDiv1.onmouseout = oDiv2.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = 'none';
},500)
};
}
</script>
四、无缝滚动
1.offsetLeft的作用
2.用定时器让物体连续移动
3.效果原理-让ul一直向左移动,复制li
4.innerHTML和+= 修改ul的width
5.滚动过界后,重设位置,判断过界
核心代码如下
<style>
* {margin: 0; padding: 0;}
#div1{width: 1420px; height:215px; margin:100px auto;position: relative;background: red;overflow: hidden;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li { float: left; width: 355px;height: 215px;list-style: none;}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var speed = -2;
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move() {
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0';
}
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/2+'px';
}
oUl.style.left = oUl.offsetLeft+speed+'px';
}
var timer = setInterval(move,30);
// 鼠标移入定时器停止
oDiv.onmouseover = function () {
clearInterval(timer);
};
oDiv.onmouseout = function () {
timer = setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick = function () {
speed = -2;
};
document.getElementsByTagName('a')[1].onclick = function () {
speed = 2;
}
}
</script>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
