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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。