JavaScript时钟与定时器
1.时钟
例子：时钟
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<script type="text/javascript">
window.onload = function(){ function fnRunning(){ var oDiv = document.getElementById('div1'); var sNow = new Date(); /*当前时间*/ var iYear = sNow.getFullYear(); /*年*/ var iMonth = sNow.getMonth()+1; /*月*/ var iDate = sNow.getDate(); /*日*/ var iWeek = sNow.getDay(); var iHour = sNow.getHours(); /*时*/ var iMinute = sNow.getMinutes();/*分*/ var iSecond = sNow.getSeconds(); /*秒*/ var sAdate = iDate + '-' + iMonth + '-' + iYear + ' ' + fnWeek(iWeek) + ' ' + fnClock(iHour) + ':' + fnClock(iMinute) + ':' + fnClock(iSecond); /*alert(sAdate);*/ oDiv.innerHTML = '当前时间：' + sAdate; } function fnWeek(n){ switch(n){ case 0: return '星期日'; break; case 1: return '星期一'; break; case 2: return '星期二'; break; case 3: return '星期三'; break; case 4: return '星期四'; break; case 5: return '星期五'; break; case 6: return '星期六'; break; } } function fnClock(n){ /*给时分秒补零*/ if(n<10){ return '0'+n; } else{ return n; } } fnRunning(); /*setInterval执行要一秒，在调用前先执行fnRunning*/ setInterval(fnRunning,1000);}</script>
<style type="text/css">
div{ text-align: center; font-size: 50px; background-color: antiquewhite;}</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
例子二：倒计时
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<script type="text/javascript">
window.onload = function(){ function down(){ var oDiv = document.getElementById('div1'); /*实际开发中需要读取后台数据的时间，可以通过ajax来读取*/ var sNow = new Date(); /*alert(sNow);*/ /*未来时间,月份是0-11表示一到十二月*/ var sFuture = new Date(2019,0,6,15,0,0); /*计算多少秒*/ var sLast = parseInt((sFuture-sNow)/1000); /*alert(sLast);单位s*/ var iDay = parseInt(sLast/86400); /*alert(iDay);日*/ var iHour = parseInt((sLast%86400)/3600); /*alert(iHour);时*/ var iMinutes = parseInt((sLast%86400)%3600/60); /*alert(iMinutes);分*/ var iSecond = sLast%60; /*alert(iSecond);秒*/ var sTr = '距离今天下午15：00还剩: ' + add(iDay) + '天' + add(iHour) + '时' + add(iMinutes) + '分' + add(iSecond) + '秒'; oDiv.innerHTML = sTr; } function add(n){ /*补零函数*/ if(n<10){ return '0'+n; } else{ return n; } } down(); /*setIterval执行需要大概一秒，先执行一遍down*/ setInterval(down,1000);}</script>
<style type="text/css">
div{ text-align: center; font-size: 40px; background-color: beige;}</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2.定时器
setTimeout（函数名，时间） 只执行一次的定时器
注：
第一个可以写函数名也可以写匿名函数，时间单位是毫秒，不写单位。
clearTimeout 关闭只执行一次的定时器
如：
var iRan = setTimeout(fake,1000);
clearTimeout(iRan);
setInterval 反复执行的定时器
clearInterva 关闭反复执行的定时器
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
