JavaScript时钟与定时器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 关闭反复执行的定时器

以上是关于JavaScript时钟与定时器的主要内容,如果未能解决你的问题,请参考以下文章

Flash Canvas HTML5 Javascript 中的倒数时钟计时器

javascript (java)动态时钟

UEFI.源码分析.DXE的异步事件服务.第三部分.定时器与时钟中断

UEFI.源码分析.DXE的异步事件服务.第三部分.定时器与时钟中断

stm32之时钟控制

基于SE555定时器时钟输出信号方案设计(基本原理输出信号频率设计与实际不符合的解决)