使用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 相关文章推荐
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
原生js生成图片验证码
Oct 11 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
Python字符串替换实例分析
2015/05/11 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python的列表List求均值和中位数实例
2020/03/03 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python中wx模块的具体使用方法
2020/05/15 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
个人简历自我评价八例
2013/10/31 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
物业工作计划书
2014/01/10 职场文书
运动会入场词200字
2014/02/15 职场文书
爱之链教学反思
2014/04/30 职场文书
应聘教师自荐书
2014/06/16 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Java异常体系非正常停止和分类
2022/06/14 Java/Android