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 相关文章推荐
splice slice区别
Oct 09 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
js实现异步循环实现代码
Feb 16 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
JS实现商品筛选功能
Aug 19 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 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实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
英语求职信范文
2014/05/23 职场文书
民事和解协议书格式
2014/11/29 职场文书
公司感谢信范文
2015/01/22 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫