编程 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 Jquery 遍历Json的实现代码

Mar 31 Javascript

JavaScript简单实现网页回到顶部功能

Nov 12 Javascript

Jquery获取和修改img的src值的方法

Feb 17 Javascript

关于Javascript 对象(object)的prototype

May 09 Javascript

js console.log打印对像与数组用法详解

Jan 21 Javascript

浅谈JS中逗号运算符的用法

Jun 12 Javascript

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

Jul 22 Javascript

关于javascript中限定时间内防止按钮重复点击的思路详解

Aug 16 Javascript

jquery 实现回车登录详解及实例代码

Oct 23 Javascript

原生JS改变透明度实现轮播效果

Mar 24 Javascript

jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

Apr 10 jQuery

Vue 中如何将函数作为 props 传递给组件的实现代码

May 12 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