js定时器

js定时器主要有两个setTimeout和setInterval。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码（可以理解为每隔多少时间），而setTimeout只执行一次那段代码（即当多少时间后执行代码）。

区别：
window.setTimeout("function",time)；//设置一个超时对象，只执行一次,无周期 
window.setInterval("function",time)；//设置一个超时对象，周期＝'交互时间'
停止定时： 
window.clearTimeout(对象) 清除已设置的setTimeout对象
window.clearInterval(对象) 清除已设置的setInterval对象

举个例子：

//只执行一次
function PerRefresh() {
     var today = new Date();
     alert("The time is: " + today.toString());
     setTimeout("PerRefresh()", 5000);
}

//每隔5秒执行一次
setInterval("PerRefresh()", 5000);

function PerRefresh() {
     var today = new Date();
     alert("The time is: " + today.toString());
}

1.简单的显示年月日、星期、时间

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>当前系统时间</title>
<link rel="stylesheet" href="style.css"  />
<script language="javascript" type="text/javascript">

  window.onload = function(){
    showTime();
  }
  function checkTime(i){  //补位处理
    var i;  
    if(i<10){
        i="0"+i;
    }
    return i;
  }
  function showTime(){
    var now=new Date();
    var year=now.getFullYear() ;
    var month=now.getMonth()+1;
    var day=now.getDate();
    var h=now.getHours();
    var m=now.getMinutes();
    var s=now.getSeconds();
    m=checkTime(m);
    s=checkTime(s);
    var d=now.getDay();
    var weekday=new Array(7)
    weekday[0]="星期日"
    weekday[1]="星期一"
    weekday[2]="星期二"
    weekday[3]="星期三"
    weekday[4]="星期四"
    weekday[5]="星期五"
    weekday[6]="星期六"

    document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+weekday[d]+h+":"+m+":"+s;
    t=setTimeout('showTime()',500);
  }

</script>
</head>
<body>
<div class="content1">
  <div id="show">显示时间的位置</div> 
</div>
</body>
</html>
View Code

2.倒计时几天几小时几分几秒

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时时间</title>
</head>

<body>
<div class="content3">
<div class="time">还剩 <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
        var endtime=new Date("2016/12/25,12:12:12");//结束时间
        var nowtime = new Date();//当前时间
        var lefttime= endtime.getTime()-nowtime.getTime() ; 
        d=parseInt(lefttime/(24*60*1000*60));
        h=parseInt((lefttime/(1000*60*60))%60); 
        m=parseInt((lefttime/(1000*60))%60);
        s=parseInt((lefttime/(1000))%60);
              document.getElementById("LeftTime").innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
        if(lefttime<=0){
        document.getElementById("LeftTime").innerHTML="团购已结束";
        clearInterval(sh);
        }
}
   FreshTime();
   var sh;
   sh=setInterval(FreshTime,500);
</script>
</body>
</html>

 

posted @ 2017-02-20 18:03  chillylight  阅读(680)  评论(0)  编辑  收藏  举报