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模拟select,jselect的方法实现
Nov 08 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
Vue中props的使用详解
Jun 15 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
js实现动态时钟
Mar 12 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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插件Xajax使用方法详解
2017/08/31 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
原生js实现随机点餐效果
2019/12/10 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python的argparse库使用详解
2018/10/09 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
一帮一活动总结
2014/05/08 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
考试作弊检讨
2015/01/27 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
最美乡村教师观后感
2015/06/11 职场文书
节水宣传标语口号
2015/12/26 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android