首页 > 代码库 > 10、定时器与倒计时

10、定时器与倒计时

2024-11-22 17:20:39   203人阅读

一、定时器

//定时器有两个，setInterval setTimeout ; 他们都属于window下全局方法；
    //setInterval(callback,毫秒数):每隔一段时间执行一次;关闭定时器用clearInterval
    //setTimeout(callback,毫秒数)：只能执行一次； 关闭setTimeout用clearTimeout;
    var n=0;
    /*var timer=window.setInterval(function(){
        if(n==5){
            clearInterval(timer)
        }
        alert(n++)
    },0)*/
    var timer2=setTimeout(function(){
        alert(++n)
    },1000)
   // alert(123)

二、倒计时的思路：

倒计时的思路：
1）求出未来距离现在的毫秒数，然后把毫秒数转成秒数，并且取整；
2）秒转换：我们需要计算一天有多少秒：24*60*60=86400
3)字符串拼接
4）函数先调用一次， 定时器调用

三、日期对象

oDate.getTime() 现在距离1970年1月1日 00:00:00 的毫秒数； 即 格林尼治时间；
var oP=document.getElementsByTagName(‘div‘)[0];

    function getTime(){
        var oDate=new Date(); //实例 对象
        var y=oDate.getFullYear();
        var m=oDate.getMonth()+1; //获取月份的时候，一定要+1；
        var d=oDate.getDate(); //日期 几号
        var week=oDate.getDay();//星期日：0,1,2,3,4,5,6
        var h=oDate.getHours();
        var min=oDate.getMinutes();
        var s=oDate.getSeconds();
        var str=h+‘:‘+min+‘:‘+s;
        oP.innerHTML=str;
    }
    getTime();
    var timer=setInterval(getTime,1000)
    /*var ary=[‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘]
    alert(‘今天星期‘+ary[week]);*/

 四、时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size: 50px;
        }
        p{
            display: inline-block;
            color: red;
            font-weight: bold;
            font-size: 80px;
        }
    </style>
</head>
<body>
<div>北京时间，下午<p>00:00:00</p></div>
<script>
    var oP=document.getElementsByTagName(‘p‘)[0];
    //toDou功能：让一位数字，都变成两位；
    function toDou(n){ //获取两位数
        return n>=0 && n<10? ‘0‘+n:‘‘+n;
    }
    var str=null;
    function getTime(){
        //1.获取日期对象；
        var oDate=new Date();
        var h=oDate.getHours();
        var m=oDate.getMinutes();
        var s=oDate.getSeconds();
        str=toDou(h)+‘:‘+toDou(m)+‘:‘+toDou(s); //字符串拼接日期
        oP.innerHTML=str;
    }
    getTime(); //必须先调用一次，否则，页面会出现一秒钟的00:00:00；
    var timer=setInterval(getTime,1000);//用定时器每隔1000毫秒调用一次getTime；
</script>
</body>
</html>

五、倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            font-size: 40px;
        }
        span{
            font-size: 60px;
            color: red;
        }
    </style>
</head>
<body>
<div>距离下课还剩<span>00天 00:00:00</span>时间</div>
<script>
    var oSpan=document.getElementsByTagName(‘span‘)[0];
    function toDou(n){
        return n>=0 && n<10? ‘0‘+n :‘‘+n;
    }
    function cuntDown(){
        var oDate=new Date();
        //设置未来时间的时候，一定要用/杠，否则不兼容；
        var newDate=new Date(‘2016/9/31 18:00:00‘);
       // alert(newDate.getTime()-oDate.getTime());
        var s=Math.floor((newDate-oDate)/1000);
        if(s<=0){
            clearInterval(timer);
            oSpan.innerHTML=‘您来晚了，活动已结束‘;
            oSpan.style.color=‘#ccc‘
            return;
        }
        //24*60*60=86400；
        var d=Math.floor(s/86400);
        s%=86400; //剩余的秒数；
        var h=Math.floor(s/3600);
        s%=3600;
        var m=Math.floor(s/60);
        s%=60;
        oSpan.innerHTML=toDou(d)+‘天‘+toDou(h)+‘:‘+toDou(m)+‘:‘+toDou(s);
    }
    cuntDown();
    var timer=setInterval(cuntDown,1000);
</script>
</body>
</html>

 

 

10、定时器与倒计时


联系
我们