使用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实现动态时钟

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

Javascript 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
了解javascript中变量及函数的提升
May 27 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
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php minixml详解
2008/07/19 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
javascript add event remove event
2008/04/07 Javascript
jquery tools之tooltip
2009/07/25 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
JS作用域链详解
2017/06/26 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
10款最好的Python开发编辑器
2019/07/03 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
软件测试工程师结构化面试题库
2016/11/23 面试题
学生实习自我鉴定
2013/10/11 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
六一儿童节致辞
2015/07/31 职场文书
《七律·长征》教学反思
2016/02/16 职场文书