JavaScript时钟与定时器-白红宇

JavaScript时钟与定时器

阅读量：6191 次

发布时间：2019-06-21

本文共 3255 字，大约阅读时间需要 10 分钟。

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);}

<style type="text/css">

div{    text-align: center;    font-size: 50px;    background-color: antiquewhite;}

</head>

<body>

</body>
</html>

JavaScript时钟与定时器

例子二：倒计时

<!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);}

<style type="text/css">

div{    text-align: center;    font-size: 40px;    background-color: beige;}

</head>

<body>

</body>
</html>

JavaScript时钟与定时器

2.定时器

setTimeout（函数名，时间）只执行一次的定时器

注：
第一个可以写函数名也可以写匿名函数，时间单位是毫秒，不写单位。

clearTimeout 关闭只执行一次的定时器

如：
var iRan = setTimeout(fake,1000);
clearTimeout(iRan);

setInterval 反复执行的定时器

clearInterva 关闭反复执行的定时器

转载于:https://blog.51cto.com/13742773/2339374

你可能感兴趣的文章

“十年磨一剑”--有赞的HBase平台实践和应用之路 ...

查看>>

交换综合实验一

查看>>

[Shell 脚本] 备份网站文件至OSS服务（纯shell脚本无sdk） ...

查看>>

阿里云服务器如何修改远程端口？

查看>>

智能媒体管理(IMM)视频分析中明星识别介绍

查看>>

Angular 应用解决跨域访问的问题

查看>>

军武科技获5000万元B轮融资男性用户占比达到90%以上

查看>>

一位6年老Android面经总结

查看>>

Windows Server 2016 检查更新时，错误代码8024401C 的解决方案

戴姆勒与宝马抱团开发自动驾驶新旧车企大战在即

查看>>

蠕虫利用新公开的Confluence RCE漏洞进行大规模攻击，用户应尽快修复

查看>>

MIPS R6架构现已可供开放使用

查看>>

K8S-网络模型、POD/RC/SVC YAML 语法官方文档

查看>>