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


Posted in Javascript onJuly 30, 2018

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.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.3water.com/code/HtmlJsRun,测试运行效果如下:

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

Javascript 相关文章推荐
javascript中call和apply方法浅谈
Sep 27 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 #Javascript
angular-tree-component的使用详解
Jul 30 #Javascript
使用vue-router为每个路由配置各自的title
Jul 30 #Javascript
You might like
PHP json_decode函数详细解析
2014/02/17 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JavaScript 创建对象
2009/07/17 Javascript
模拟select的代码
2011/10/19 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python分析学校四六级过关情况
2017/11/22 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
小学教师自我鉴定
2013/11/07 职场文书
司机的工作范围及职责
2013/11/13 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
MySQL注入基础练习
2021/05/30 MySQL
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Python OpenCV形态学运算示例详解
2022/04/07 Python