0%

定时器的使用

发表于 更新于

开启定时器

setInterval 间隔型
setTimeout 延时型
两种定时器的区别

停止定时器

clearInterval
clearTimeout

数码时钟

获取系统时间

Date对象

getHours、getMinutes、getSeconds

年 getFullYear() 月 getMonth() 日 getDate() 星期 getDay()

显示系统时间

字符串连接

空位补零

设置图片路径

charAt 方法（兼容问题）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function toD(time){//空位补零
			if(time < 10)
			{
				time = '0'+time;
			}else{
				time = ''+ time;
			}

			return time;//忘记return
		}

		window.onload = function (){
			var aImg = document.getElementsByTagName('img');			
			function timer(){
				var oD = new Date;
				var str = toD(oD.getHours()) + toD(oD.getMinutes()) + toD(oD.getSeconds());

				for(var i = 0; i < aImg.length; i++){
					//aImg[i].src = "img/"+str[i]+".png";	低版本 IE7 不支持
					aImg[i].src = "img/"+str.charAt(i)+".png";
				}
			}

			timer();
			setInterval(timer, 1000);

		}

延时提示框

移入显示，移出隐藏

移出延时隐藏

简化代码

合并两个相同的 mouseover 和 mouseout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window,onload = function (){
			var oDiv1 = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			var timer = null;

			oDiv1.onmouseover = oDiv2.onmouseover = function () {
				clearTimeout(timer);
				oDiv2.style.display = 'block';
			}
			oDiv1.onmouseout = oDiv2.onmouseout = function () {
				timer = setTimeout(function(){
					oDiv2.style.display = 'none';
				},500);
			}
		}

无缝滚动

效果演示

物体运动基础

让 Div 移动起来

offsetLeft / offsetRight / offsetWidth 的作用

用定时器让物体连续移动

让 ul 一直向左移动

复制 li

innerHTML 和+=

修改 ul 的 width

滚动过界后，重设位置

判断过界

改变滚动方向

修改 speed

修改判断条件

鼠标移入暂停

移入关闭定时器

移出重新开启定时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.onload = function (){
	var oDiv = document.getElementById('div1');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var oBtn1 = document.getElementById('btn1');
	var oBtn2 = document.getElementById('btn2');
	var aLi = oUl.getElementsByTagName('li');
	var speed = 2;

	oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
	oUl.style.width = aLi.length * aLi[0].offsetWidth +'px';

	function move(){
		if(oUl.offsetLeft <  -oUl.offsetWidth/2){
			oUl.style.left = 0 +'px';
		}
		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);};

	oBtn1.onclick = function (){
		speed = 2;
	};

	oBtn2.onclick = function (){
		speed = -2;
	};