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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
用文本作数据处理
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
php基础知识:控制结构
2006/12/13 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python异常处理操作实例详解
2018/08/28 Python
python实现简单登陆系统
2018/10/18 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python图像处理入门(一)
2019/04/04 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
公务员个人自我评价分享
2013/11/06 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
电脑教师的自我评价
2013/12/18 职场文书
工程师岗位职责规定
2014/02/26 职场文书
硕士生工作推荐信
2014/03/07 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
2014年领班工作总结
2014/11/25 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript