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整除实现代码
Nov 23 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
开启BootStrap学习之旅
May 04 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
请求时token过期自动刷新token操作
Sep 11 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
php smarty函数扩展
2010/03/15 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
javascript编程起步(第二课)
2007/01/10 Javascript
javascript编程起步(第二课)
2007/02/27 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python logging模块原理解析及应用
2020/08/13 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
ECHT官方网站:男女健身服
2020/02/14 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
五一手机促销方案
2014/03/08 职场文书
如何写自我鉴定
2014/03/19 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年实习期工作总结
2014/11/27 职场文书
公司年夜饭通知
2015/04/25 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技