20150706 js之定时器

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_34252686

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量59

点赞数

文章标签： xhtml javascript ViewUI

对应智能社：09 定时器的使用

开启定时器：

 setInterval(xxx(),1000);//间隔型 第一个参数为函数，第二个为时间，单位为毫秒
 setTimeout(xxx(),1000);//延时型

停止定时器：

clearInterval(timer);//参数为setInterval()函数的返回值，返回值实际上是一个number
clearTimeout(timer);//参数为setTimeout()函数的返回值，返回值实际上是一个number

setInterval(a,1000);

其中参数一为一个函数名，第二个为一个数值，单位为毫秒。

function a(){
	console.log('wyl');
}

setInterval(a,1000)

　　setInterval 的会一直执行，简直停不下来。

与之对应的是setTimeout则只执行一次。这就是二者的区别。

附上自己写的数码时钟：

<html>
	<HEAD>
		<meta charset="utf-8">
		<title> 数码时钟</title>
		<script type="text/javascript">
				window.onload = function(){
					xx();//一加载就立刻执行
					setInterval(xx,1000);

				};
				function xx(){
					var date = new Date();
						var hours = to_doub(date.getHours());
						var min = to_doub(date.getMinutes());
						var sec = to_doub(date.getSeconds());
						var str = ''+hours+min+sec;
						var img = document.getElementsByTagName('img');
						var len = img.length;
					
						for(var i=0;i<len;i++){
							img[i].src = "img/"+str[i]+".png";
						}
				}

				// 比如时间为 01 23 43 秒，01时要显示为01而不能显示为1，
				function to_doub(n){
					if(n<10){
						return '0'+n;
					}
					else{
						return ''+n;
					}
				}
		</script>
	</HEAD>
	<body style="background:grey; ">
		<img src="img/0.png">
		<img src="img/2.png">
		<img src="img/4.png">
		<img src="img/5.png">
		<img src="img/4.png">
		<img src="img/1.png">
	</body>
</html>

　　x效果图如下：

另一个例子：

代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	div {float:left; margin:20px}
	#div1 {width:50px; height:50px; background:red;}
	#div2 {width:100px; height:100px; background:#0CF; display:none}
</style>
	<script>
		window.onload = function(){
    		var oDiv1 = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			var timer = null;
			oDiv1.onmouseover = function(){
					oDiv2.style.display = "block";//显示
					
				}
			oDiv1.onmouseout = function(){
					timer = setTimeout(function(){
							oDiv2.style.display = "none";//隐藏
						},500);
				}
			oDiv2.onmouseover = function(){
					clearTimeout(timer);
					oDiv2.style.display = "block"; //显示
				}
			oDiv2.onmouseout = function(){
					oDiv2.style.display = 'none';
				}
    	}
	</script>
</head>
	
<body>
	<div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

　　效果图如下：

weixin_34252686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20150706 js之定时器

对应智能社：09 定时器的使用开启定时器： setInterval(xxx(),1000);//间隔型第一个参数为函数，第二个为时间，单位为毫秒 setTimeout(xxx(),1000);//延时型停止定时器：clearInterval(timer);//参数为setInterval()函数的返回值，返回值实际上是一个numberclearTimeo...
复制链接

扫一扫