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 相关文章推荐
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Python 统计字数的思路详解
2018/05/08 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
Python中的__init__作用是什么
2020/06/09 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
美国校园市场:OCM
2017/06/08 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
大学校庆邀请函
2014/01/11 职场文书
初二政治教学反思
2014/01/12 职场文书
韩国商务邀请函
2014/01/14 职场文书
集体备课反思
2014/02/12 职场文书
防沙治沙典型材料
2014/05/07 职场文书
会计学专业自荐信
2014/06/25 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python