使用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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
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程序--记数器
2006/10/09 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
西式结婚主持词
2014/03/14 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
mysql全面解析json/数组
2022/07/07 MySQL
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript