脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 实时更新当前时间

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

 更新时间：2020年07月15日 14:43:45   作者：Jeslie-He  
这篇文章主要介绍了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()

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

在这里插入图片描述

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

效果如图：

代码如下：

<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中的LHS和RHS查询

    浅聊一下JavaScript中的LHS和RHS查询

    在日常编码中,我们通常关注代码的逻辑和功能,但很少深入思考编译器在幕后的工作,今天我们将学习一下LHS（Left-Hand Side）和RHS（Right-Hand Side）查询,它们在JavaScript编译和执行中的关键作用,以及在我们的日常开发中是如何发挥作用的,需要的朋友可以参考下
    2023-11-11
  • Bootstrap基本插件学习笔记之Popover提示框(19)

    Bootstrap基本插件学习笔记之Popover提示框(19)

    这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之Popover提示框的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 细数promise与async/await的使用及区别说明

    细数promise与async/await的使用及区别说明

    这篇文章主要介绍了细数promise与async/await的使用及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • GoJs 图片绘图模板Picture使用示例详解

    GoJs 图片绘图模板Picture使用示例详解

    这篇文章主要为大家介绍了GoJs 图片绘图模板Picture使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 20个拿来就能用的JavaScript技巧分享

    20个拿来就能用的JavaScript技巧分享

    这篇文章主要来和大家一起探讨一下20 种 JavaScript 技巧和窍门,每种技巧和窍门都有通俗易懂的示例,让我们一起来提升你的 JavaScript 技能吧
    2023-10-10
  • 小程序登录/注册页面设计的实现代码

    小程序登录/注册页面设计的实现代码

    这篇文章主要介绍了小程序登录/注册页面设计的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 探讨：JavaScript ECAMScript5 新特性之get/set访问器

    探讨：JavaScript ECAMScript5 新特性之get/set访问器

    这篇文章主要介绍了探讨：JavaScript ECAMScript5 新特性之get/set访问器 的相关资料,需要的朋友可以参考下
    2016-05-05
  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    下面小编就为大家带来一篇JavaScript中解决多浏览器兼容性23个问题的快速解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS使用Dijkstra算法求解最短路径

    JS使用Dijkstra算法求解最短路径

    这篇文章主要为大家详细介绍了JS使用Dijkstra算法求解最短路径，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JS 数字转换为大写金额的简单实例

    JS 数字转换为大写金额的简单实例

    下面小编就为大家带来一篇JS 数字转换为大写金额的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论