编程 Javascript

使用JS实现动态时钟

Posted in Javascript onMarch 12, 2020

本文实例为大家分享了JS实现动态时钟的具体代码，供大家参考，具体内容如下

利用setTime()实现动态的时钟效果

代码如下

<html>
  <head>
    <meta charset="utf-8">
    <title>正在运行的时钟</title>
    <style type="text/css">
      /*设置样式：无边框的文本框*/
      input,
      #clock {
        width: 390;
        font-size: 30px;
        font-weight: 900;
        color: #FFFFFF;
        background-color: #930;
        border: 8px double #900;
 
      }
    </style>
 
  </head>
  <body onLoad="disptime( ) ">
    <form name="myform">
      <input name="myclock" type="text" value="" size="20">
    </form>
    <span id="clock"></span>
 
    <script language="JavaScript">
      function disptime() {
        var time = new Date(); //获得当前时间
        var year = time.getFullYear(); //获得年月日
        var month = time.getMonth(); //获得年月日
        var date = time.getDate(); //获得年月日
        var hour = time.getHours(); //获得小时、分钟、秒
        var minute = time.getMinutes();
        var second = time.getSeconds();
        if (minute < 10) //如果分钟只有1位，补0显示
          minute = "0" + minute;
        if (second < 10) //如果秒数只有1位，补0显示
          second = "0" + second;
        /*设置文本框的内容为当前时间*/
        document.getElementById('clock').innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" +
          second
        document.myform.myclock.value = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second
        /*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
        var myTime = setTimeout("disptime()", 1000);
 
      }
    </script>
  </body>
</html>

效果如图

使用JS实现动态时钟

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

使用JS实现动态时钟

- Author -

披风超人

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

Javascript 相关文章推荐

JavaScript 更严格的相等 [译]

Sep 20 Javascript

jquery表格内容筛选实现思路及代码

Apr 16 Javascript

JavaScript定义类的几种方式总结

Jan 06 Javascript

jQuery删除一个元素后淡出效果展示删除过程的方法

Mar 18 Javascript

用JavaScript实现对话框的教程

Jun 04 Javascript

jQuery实现类似标签风格的导航菜单效果代码

Aug 25 Javascript

探寻JavaScript中this指针指向

Apr 23 Javascript

jQuery实现页面滚动时智能浮动定位

Jan 08 Javascript

jQuery插件zTree实现清空选中第一个节点所有子节点的方法

Mar 08 Javascript

动手写一个angular版本的Message组件的方法

Dec 16 Javascript

vue组件化中slot的基本使用方法

May 01 Javascript

js 闭包深入理解与实例分析

Mar 19 Javascript

Vue使用vue-draggable 插件在不同列表之间拖拽功能

Mar 12 #Javascript

js实现动态时钟

Mar 12 #Javascript

package.json各个属性说明详解

Mar 11 #Javascript

package.json中homepage属性的作用详解

Mar 11 #Javascript

vue项目中使用vue-layer弹框插件的方法

Mar 11 #Javascript

Vue组件模板及组件互相引用代码实例

Mar 11 #Javascript

Vue组件间的通信pubsub-js实现步骤解析

Mar 11 #Javascript