JS 定时器学习

 admin  WEB  2019-11-15

定时器

一次性定时器:window.setTimeout(‘js代码’, 时间t)
执行:是在时间t之后执行js代码[只会执行一次]
时间:以毫秒伪单位

反复性定时器:window.setInterval(‘js代码’,时间t)
执行:是没时间t就会执行一次js代码[n次]
时间:是以毫秒伪单位

清除定时器
清除一次性定时器
window.clearTimeout(定时器名)
清除反复性定时器
window.clearInterval(定时器名)
注意:想要清除定时器,必须给定时器一个名字,也就是将定时器存储再变量中

<script type="text/javascript">
	   //定义一次性定时器
	 	var dingshiqi1 = window.setTimeout('alert(123)',5000);
	 	//定义反复性定时器
	 	var dingshiqi = window.setInterval('alert(456)',3000);
	 	function clearSET(){
	 			//清除一次性定时器
	 			window.clearTimeout(dingshiqi);
	 			//清除返回性定时器
	 			window.clearInterval(dingshiqi1)
	 	}
	 </script>
	 <input type="button" value="清除定时器" onclick="clearSET()">

下面来个简单的小实例，但是在正式开始实例之前，需要补充一个小知识点，那就是window.onload=timer() 和window.onload=timer的区别

1、window.οnlοad=timer表示将函数赋值给window.onload,也就说，这里不需要调用函数，而是函数的值完全已经交给window.onload,这种方式主要用于页面加载就执行的某些动作
2、window.οnlοad=timer()表示页面加载则调用函数，和上面还是有一点点的区别的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器案例</title>
    <style type="text/css">
        div{
            border: 10px solid blue;
            background-color: yellow;
            height: 100px;
            font-size: 60px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = timer;
        //定时器函数
        function timer(){
            gainTime();
            window.setInterval(timer,1000);
        }
        //将时间显示在页面的函数
        function gainTime(){
            //获取当前时间
            var time = new Date();
            var div1 = document.getElementById('div1');
            // toLocaleString 将数组转换成本地字符串
            div1.innerHTML = time.toLocaleString();
        }
    </script>
</head>
<body>
<div id="div1" >时间</div>
</body>
</html>

效果图: