编程 Javascript

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，测试运行效果如下：

- Author -

时光不顾

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 禁止选择功能实现代码(兼容IE/Firefox)

Apr 23 Javascript

JavaScript小技巧 2.5 则

Sep 12 Javascript

jquery判断元素的子元素是否存在的示例代码

Feb 04 Javascript

JavaScript中使用Object.prototype.toString判断是否为数组

Apr 01 Javascript

JQuery中属性过滤选择器用法实例分析

May 18 Javascript

js微信分享API

Oct 11 Javascript

BootStrap 模态框实现刷新网页并关闭功能

Jan 04 Javascript

jquery获取select选中值的文本,并赋值给另一个输入框的方法

Aug 21 jQuery

JS学习笔记之原型链和利用原型实现继承详解

May 29 Javascript

echarts柱状图背景重叠组合而非并列的实现代码

Dec 10 Javascript

vue3弹出层V3Popup实例详解

Jan 04 Vue.js

node中短信api实现验证码登录的示例代码

Jan 20 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