使用Javascript在HTML中显示实时时间
更新时间：2022年06月19日 06:50:46 作者：lihuiGG520
这篇文章主要为大家详细介绍了使用Javascript在HTML中显示实时时间，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了用Javascript在HTML中显示实时时间的具体代码，供大家参考，具体内容如下
方法如下：
1. 在script中建立方法time；
2. 创建新的Date对象date，并通过使用Date的内置方法给year、month等赋值；
3. 通过连接符号将各个时间连接起来；
4. 使用document.getElementById(“time”).innerHTML将其显示到HTML主页中；
5. 使用setInterval设置动态更新时间，即实时时间；
注意：
（1）获取年份的方法前面有full；
（2）月份的表示从零开始；
（3）周的获取值表示为数字，可以通过switch的方法转换，也可以通过下面代码中的方法将其转化为星期几；
（4）对于时分秒的两位表示，可以在前面加上符号0；
参考代码见下：
<html>
<head>
<meta charset="UTF-8">
<title>日期和时间</title>
<script>
function time(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var week = date.getDay();
week="星期"+"日一二三四五六".charAt(week);
/*switch(week){
case 1:
week="星期一";
break;
case 2:
week="星期二";
break;
case 3:
week="星期三";
break;
case 4:
week="星期四";
break;
case 5:
week="星期五";
break;
case 6:
week="星期六";
break;
case 0:
week="星期日";
break;
}*/
var hour =date.getHours();
hour=hour<10?"0"+hour:hour;
var minute =date.getMinutes();
minute=minute<10?"0"+minute:minute;
var second = date.getSeconds();
second=second<10?"0"+second:second;
var currentTime = year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
document.getElementById("time").innerHTML=currentTime;
}
setInterval("time()",1000);
</script>
</head>
<body onload="time()">
<span id="time"></span>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了js实现计时器秒表功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
本篇文章主要介绍了three.js实现3D模型展示的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了JS实现网页时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家详细介绍了微信小程序实现录音Record功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了JS+CSS实现类似QQ好友及黑名单效果的树型菜单,涉及JavaScript结合鼠标事件针对页面元素CSS样式的动态操作技巧,非常简单实用,需要的朋友可以参考下2015-09-09
在你的网页中嵌入外部网页的方法...2007-04-04
本文主要介绍了原生js实现弹出层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
JavaScript Event学习第五章 高级事件注册模型
在这一章我会讲解两种高级时间注册模型：W3C和微软的。因为这两个方法都不能跨浏览器，所以在现在看来他们的使用场合并不多。2010-02-02
这篇文章主要介绍了JavaScript实现一个电子小蜘蛛,具体的样子就是让它会跟随着我们的鼠标进行移动,那么我们如何实现这样的效果呢,下面来详细讲解实现方法,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了JavaScript常用验证函数,实例汇总了如字符串验证、表单验证及js常用特效等诸多js常用验证函数及相关技巧,非常具有实用价值,需要的朋友可以参考下2014-11-11
最新评论