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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
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 Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
大学生的网上创业计划书
2013/12/31 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2014年教研室工作总结
2014/12/06 职场文书
社区母亲节活动总结
2015/02/10 职场文书
联谊活动总结范文
2015/05/09 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书