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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
js控制框架刷新
Aug 01 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
javascript与有限状态机详解
May 08 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
详解JavaScript常量定义
Jan 03 Javascript
vue实现全选和反选功能
Aug 31 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
vue init失败简单解决方法(终极版)
Dec 22 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和.net中des加解密的实现方法
2013/02/27 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
可输入的下拉框
2006/06/19 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
原生javascript实现隔行换色
2015/01/04 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
采购部主管岗位职责
2014/01/01 职场文书
化妆品促销方案
2014/02/24 职场文书
法制工作总结2015
2015/07/23 职场文书
宿舍管理制度范本
2015/08/07 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript