使用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 word表格动态添加代码
Jun 07 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
vue实现一拉到底的滑动验证
Jul 25 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php表单提交问题的解决方法
2011/04/12 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
利用python画出折线图
2018/07/26 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
中学教师教育感言
2014/02/21 职场文书
建筑投标担保书
2014/05/20 职场文书
励志演讲稿300字
2014/08/21 职场文书
作弊检讨书
2015/01/27 职场文书
导游词之日月潭
2019/11/05 职场文书