编程 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 相关文章推荐

JS 文字符串转换unicode编码函数

May 30 Javascript

javascript 使用 NodeList需要注意的问题

Mar 04 Javascript

JavaScript实现的日期控件具体代码

Nov 18 Javascript

javascript调试过程中找不到哪里出错的可能原因

Dec 16 Javascript

Windows系统下Node.js的简单入门教程

Jun 23 Javascript

基于jquery插件实现拖拽删除图片功能

Aug 27 Javascript

利用CSS、JavaScript及Ajax实现图片预加载的方法

Nov 29 Javascript

Angular 2父子组件数据传递之@Input和@Output详解(下)

Jul 05 Javascript

webpack 动态批量加载文件的实现方法

Mar 19 Javascript

JavaScript Array.flat()函数用法解析

Sep 02 Javascript

JS实现购物车基本功能

Nov 08 Javascript

Node.js 中如何收集和解析命令行参数

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