JavaScript 定时器 setTimeout、setInterval

时间 2019-11-30

标签 javascript 定时器 settimeout setinterval 栏目 JavaScript 繁體版

原文原文链接

仅供学习，转载请注明出处javascript

定时器在javascript中的做用

一、制做动画css

二、异步操做html

三、函数缓冲与节流java

定时器类型及语法bash

示例代码以下：异步

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}
复制代码

下面再演示一下，以下：函数

延迟2秒后，打印一次hello学习

每一个2秒，循环打印hello 。当打印3次，就终止。动画

练习

一、定时器制做移动动画ui

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementsByTagName('div')[0];
			// oDiv.style.marginLeft = '50px';

			// 设置定时增长marginLeft的值
			var iLeft = 50;

			if (iLeft > 0 && iLeft < 500) {
				var time1 = setInterval(function(){
					iLeft += 50;
					oDiv.style.marginLeft = iLeft + 'px';
					if ( iLeft >= 500) {
						clearInterval(time1);
					}
				},100);
			}
		}
	</script>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: gold;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
复制代码

二、定时器制做时钟

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');

			function timego(){
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth()+1;
				var date = now.getDate();
				var week = now.getDay();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				var sTr = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
				// alert(sTr);
				// oDiv.style.backgroundColor = 'gold';
				oDiv.innerHTML = sTr;
			}

			timego();

			setInterval(timego,1000);

			function toweek(n){
				if(n==0)
				{
					return '星期日';
				}
				else if(n==1)
				{
					return '星期一';
				}
				else if(n==2)
				{
					return '星期二';
				}
				else if(n==3)
				{
					return '星期三';
				}
				else if(n==4)
				{
					return '星期四';
				}
				else if(n==5)
				{
					return '星期五';
				}
				else
				{
					return '星期六';
				}
			}


			function todou(n){
				if(n<10)
				{
					return '0'+n;
				}
				else
				{
					return n;
				}
			}
		}
			
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>
复制代码

三、定时器制做倒计时

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			function timeleft(){
			    var now = new Date();
			    var future = new Date(2022,8,12,24,0,0);
			    var lefts = parseInt((future-now)/1000);
			    var day = parseInt(lefts/86400);
			    var hour = parseInt(lefts%86400/3600);
			    var min = parseInt(lefts%86400%3600/60);
			    var sec = lefts%60;
			    str = '距离2022年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
			    oDiv.innerHTML = str; 
			}
			timeleft();
			setInterval(timeleft,1000);        
		}
			
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>
复制代码