当前位置：首页 > 资讯 >

HTML页面显示动态显示时间

2023-05-02 来源:飞速影视

闲暇时间属性一下HTML，JavaScript相关的知识，毕竟好久都没有碰过前端了，有时候想想写一些简单的前端页面也是不错的休闲方式吧，毕竟看着一点点实现具体功能，心中就会产生一种成就感！
看到一个HTML动态显示系统时间，调用了javascript的Date对象，在javascript中new 一个date对象，并且根据这个date对象获取相应的时间日期的具体日期时间，比如年月日时分秒，星期等信息。
创建date对象，具体语法如下
dateObject = new Date();
date对象中的方法：
getFullYear() //获取年份
getMonth() // 获取月份
getDate() //获取日期
getDay() //获取星期
getHours() //获取小时
getMinutes() //获取分钟
getSeconds() //获取秒
如果想页面中展示时间在dev上，必须有一段html代码，而且要使时间动态变化，就需要动态的改变页面中的时间，可以使用页面载入时间，设置1秒中载入一次，显示日期的javascript的方法，具体代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态时钟</title>
<style>
#clock{
margin:100px auto;
border: 5px double green;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
font: bold;
color: red;
}
</style>
<script>
function showTime(clock){
var now = new Date();
var year = now.getFullYear();
var month= now.getMonth();
var day = now.getDate();
var hour = now.getHours();
var minu = now.getMinutes();
var second = now.getSeconds();
month = month 1;
var arr_work = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var week = arr_work[ now.getDay()];
var time = year "年" month "月" day "日 " week " " hour ":" minu ":" second;
clock.innerHTML="当前时间: " time;
window.onload = function(){
var clock = document.getElementById("clock");
window.setInterval("showTime(clock)",1000);
</script>
</head>
<body>
<div id ="clock"></div>
</body>
</html>

上述代码中：函数showTime是创建Date对象，并且拼接出需要展示的内容，最后将内容设置到clock中取，在实际调用的时候，使用window对象的onload时间，首先id获取到需要改变内容的DOM节点，然后将这个dom对象传入到show函数中，然后设置页面1秒中调用一次，最终效果如下：

HTML页面显示动态显示时间

凡人默示录动态漫画第1季

仁显王后的男人

最佳拍档2：大显神通

显微镜下的大明之丝绢案

我可以修改万物时间线动态漫画第1季

启示

启示者

等待指示