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 相关文章推荐
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
实例教学如何写vue插件
Nov 30 Javascript
koa-router源码学习小结
Sep 07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
PHP缓存技术的使用说明
2011/08/06 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
php实现图片压缩处理
2020/09/09 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js打造数组转json函数
2015/01/14 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
设置python3为默认python的方法
2018/10/31 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
中科软笔试题和面试题
2014/10/07 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
校园广播稿精选
2014/10/01 职场文书
优秀员工演讲稿
2019/06/21 职场文书
python实现简单倒计时功能
2021/04/21 Python