HTML动态显示时间HTML动态显示时间路飞博客

HTML动态显示时间

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>显示时间测试</title>
<script type="text/javascript">
function setTime() { 
   var date = new Date(); 
   var n = date.getFullYear(); // 年
   var y = date.getMonth(); // 月
   var r = date.getDate(); // 日
   var h = date.getHours(); // 时
   var m = date.getMinutes(); // 分 
   var s = date.getSeconds(); // 秒
   h = setFormat(h); 
   m = setFormat(m); 
   s = setFormat(s); 
   y = setFormat(y);
   r = setFormat(r);
   document.getElementById("time").innerHTML = "现在时间: " +n+ "年" +y+ "月" +r+ "日\t" + h + ":" + m + ":" + s 
   t = setTimeout(function() {setTime(), 1000}); 
} 
// 判断是否少于10,少于的在前面加上0,使得显示两位数
function setFormat(x) { 
   if (x < 10) { 
     x = "0" + x; 
   } 
   return x; 
} 
</script>
</head> 
<body onload="setTime()"> 
 <h1 id="time" style="color: cadetblue";font-size:30px;></h1>
</body> 
</html>

示例:

实时展示(打开查看):

https://www.qianjiyu.com/dome/date.html

转载请注明:路飞博客 » HTML动态显示时间