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 相关文章推荐
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php 读取文件乱码问题
2010/02/20 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
jQuery层次选择器用法示例
2016/09/09 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Selenium的使用详解
2018/10/19 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
新春文艺演出主持词
2014/03/27 职场文书
英文求职信范文
2014/05/23 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
结婚幸福感言
2015/08/01 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python