首页 > 编程 > JavaScript > 正文

JS实现HTML页面中动态显示当前时间完整示例

2019-11-19 13:23:08
字体:
来源:转载
供稿:网友

本文实例讲述了JS实现HTML页面中动态显示当前时间。分享给大家供大家参考,具体如下:

<!doctype html><html><head><meta charset="utf-8"><title>www.VeVB.COm JS动态显示时间</title>  <script>    var timer=null;    function displayClock(num){//num是传入的startClock中的动态值      if(num<10){        return "0"+num;      }      else{        return num;      }    }    //停止计时    function stopClock(){      clearTimeout(timer);    }    //开始计时    function startClock(){      var time =new Date();      var hours=displayClock(time.getHours())+":";      var minutes=displayClock(time.getMinutes())+":";      var seconds=displayClock(time.getSeconds());      //显示时间      show.innerHTML=hours+minutes+seconds;//在id为show的块区域显示      timer=setTimeout("startClock()",1000);//延时器    }  </script></head><style>  #show{    font-size: 24px;    color:#4213C9;    text-align:center;  }  </style><body onload="startClock()" onunload="stopClock()">  <div id="show"></div></body></html>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.VeVB.COm/code/HtmlJsRun,测试运行效果如下:

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线日期/天数计算器:
http://tools.VeVB.COm/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器:
http://tools.VeVB.COm/jisuanqi/datecalc

在线日期天数差计算器:
http://tools.VeVB.COm/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具:
http://tools.VeVB.COm/code/unixtime

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表