使用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的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
Bootstrap响应式表格详解
May 23 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 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
在字符串中把网址改成超级链接
2006/10/09 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
php 获取完整url地址
2008/12/20 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
PHP实现百度人脸识别
2019/05/06 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解javascript void(0)
2020/07/13 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python中的匿名函数使用简介
2015/04/27 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
物业总经理助理岗位职责
2014/06/29 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
建国大业观后感
2015/06/01 职场文书
《叶问2》观后感
2015/06/15 职场文书
无线电知识基础入门篇
2022/02/18 无线电