setInterval-慕课网

setInterval

来源：1-2 时间效果实现

weibo_happy的小小明_0

2017-04-16 21:41

 window.onload=function(){
			showTime();
			
			// setInterval(showTime,500);


		}; 
		//当时间数字小于10的时候，在其前面加个0
		function checkTime(i){
			if(i<10){
				i="0"+i;
			}
			return i;
		}

		function showTime(){
				//获取年 月 日
				var myDate=new Date();
				var year=myDate.getFullYear();
				var month=myDate.getMonth()+1;
				var date=myDate.getDate();

				//获取星期
				var d=myDate.getDay(); //0-6创建数组与编号对应
				var weekday=new Array(7);
				weekday[0]="星期日";
				weekday[1]="星期一";
				weekday[2]="星期二";
				weekday[3]="星期三";
				weekday[4]="星期四";
				weekday[5]="星期五";
				weekday[6]="星期六";
				
				//获取时间
				var h=myDate.getHours();
				var m=myDate.getMinutes();
				var s=myDate.getSeconds();
				m=checkTime(m);
				s=checkTime(s);
				document.getElementById("show").innerHTML=year+"年"+month+"月"+
				date+"日"+weekday[d]+h+":"+m+":"+s;
				// setTimeout(showTime,500);
				
			}
			setInterval(showTime,500);

我这里换成setInterval后放在showTime函数里面和外面都可以达到效果，放在外面并没有递归，那他是怎么实现这个效果的呢

写回答关注

2回答

迎风向上乀

2017-04-16 22:09:59

已采纳

因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
所以,完全是不一样的

很多人习惯于将setTimeout包含于被执行函数中,然后在函数外再次使用setTimeout来达到定时执行的目的

1 0

weibo_...

非常感谢！

2017-04-16 22:30:26

共 1 条回复 >

慕村1994845: 2017-05-16 21:08:50

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间设置</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

 #timer{
  margin: 100px auto;
  height: 100px;
  width: 300px;
  background: pink;
  border: 3px solid purple;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius: 10px;
 }

  #timer p{
   color: #036;
   font-size: 18px;
   font-weight: bold;
             margin: 41px 12px; 
  }
</style>

<script type="text/javascript">
window.onload=function () {
showTime();
}
function checkTime (i) {
if (i<10) {
i="0"+i;
}
return i;
}


function showTime () {
var t =setInterval(function () {//如果要设置setInterval(),那就把要执行的代码框到里面就行

var myDate= new Date(),
   year=myDate.getFullYear(),
   month=myDate.getMonth()+1,
   date=myDate.getDate(),
   day=myDate.getDay(),
   h=myDate.getHours(),
   m=myDate.getMinutes(),
   s=myDate.getSeconds();
            m=checkTime(m);//或者直接三元运算：m=m<10?'0'+m:m;下同
            s=checkTime(s);

var weekday= new Array(7);
weekday[0]="星期日";    
weekday[1]="星期一";    
weekday[2]="星期二";    
weekday[3]="星期三";    
weekday[4]="星期四";    
weekday[5]="星期五";    
weekday[6]="星期六";    

            document.getElementById('p').innerHTML=year+'年'+month+'月'+date+'日'+'&nbsp'+weekday[day]+h+':'+m+':'+s;
             },500);
            //setTimeout(showTime,500);//这里，为什么能实现循环呢？按理说，setTimeout()只执行一次，是吧；window.onload在执行函数showTime()，函数showTime()执行到setTimeout(showTime,500);时，那么showTime（）会再次执行一次，那么接下来又会执行，这样就形成了循环效果

}
</script>
</head>
<body>
  <div id="timer"><p id="p">时间显示位置</p></div>

</body>
</html>

0 0

倒计时效果

电商网站限时抢购倒计时效果计算思路和方法，前端开发必备技术

55592 学习 · 253 问题

查看课程

打开慕课网App查看更多内容