使用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替换table中的内容并显示进度条的代码
Aug 02 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
Javascript复制实例详解
Jan 28 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
软件测试面试题
2015/10/21 面试题
前台文员的岗位职责
2013/11/14 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
反对邪教标语
2014/06/30 职场文书
食品安全承诺书范文
2014/08/29 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
致运动员赞词
2015/07/22 职场文书
高质量“欢迎词”
2019/04/03 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python