JavaScript实时更新当前的时间的示例代码


Posted in Javascript onJuly 15, 2020

实现的效果如下:

JavaScript实时更新当前的时间的示例代码

时间会实时更新

具体的JS代码如下

var dateStart;
function start() {
 dateStart = new Date(); //开始时间
 startTime();
}
function startTime() {
 set = window.setTimeout("startTime()", 1000);
 var dt = new Date();
 var day = dt.getDay();
 var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
 var week = weeks[day];
 var year = dt.getFullYear();//年
 var month = dt.getMonth() + 1;//月
 var date = dt.getDate();//日
 var h = dt.getHours();
 if (h < 10) h = '0' + h;//时
 var i = dt.getMinutes();
 if (i < 10) i = '0' + i;//分
 var s = dt.getSeconds();
 if (s < 10) s = '0' + s;//秒
 var str = year + "年"+ month + "月" + date + "日" + h + ':' + i + ':' + s;
 console.log('时间:'+str,'星期:'+week)
 $('#ymd').html(str);
 $('#week').html(week)

}
start()

在控制台上可以实时的打印出当前的时间和星期

JavaScript实时更新当前的时间的示例代码

ps:js获取当前时间并实时刷新

效果如图:

JavaScript实时更新当前的时间的示例代码

代码如下:

<html>
  <head>
    <title>js获取当前时间并实时刷新</title>
    <script>
      //页面加载调用
      window.onload=function(){
        //每1秒刷新时间
       setInterval("NowTime()",1000);
      }
      function NowTime(){
        var myDate=new Date();
        var y = myDate.getFullYear();
        var M = myDate.getMonth()+1;   //获取当前月份(0-11,0代表1月)
        var d = myDate.getDate();    //获取当前日(1-31)
        var h = myDate.getHours();    //获取当前小时数(0-23)
        var m = myDate.getMinutes();   //获取当前分钟数(0-59)
        var s = myDate.getSeconds();   //获取当前秒数(0-59)
        
        //检查是否小于10
        M=check(M);
        d=check(d);
        h=check(h);
        m=check(m);
        s=check(s);
        var timestr = y+"-"+M+"-"+d+" "+h+":"+m+":"+s;
        document.getElementById("nowtime").innerHTML="当前时间:" + timestr;
      }
      //时间数字小于10,则在之前加个“0”补位。
      function check(i){
        var num = (i<10)?("0"+i) : i;
        return num;
      }
    </script>
  </head>
  <body>
    <div id="nowtime">在这里显示时间</div>
  </body>
</html>

到此这篇关于JavaScript实时更新当前的时间的文章就介绍到这了,更多相关js 实时更新当前时间内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
详解Vue单元测试case写法
May 24 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 #Javascript
Vue中keep-alive的两种应用方式
Jul 15 #Javascript
js实现浏览器打印功能的示例代码
Jul 15 #Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 #Javascript
详解JavaScript 作用域
Jul 14 #Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 #Javascript
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
python抓取网页中链接的静态图片
2018/01/29 Python
Python callable()函数用法实例分析
2018/03/17 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python交互模式基础知识点学习
2020/06/18 Python
12岁生日感言
2014/01/21 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
解决Pytorch中关于model.eval的问题
2021/05/22 Python
MYSQL 表的全面总结
2021/11/11 MySQL
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript