时间动态显示

最新推荐文章于 2025-01-02 08:46:44 发布

qq_34241112

最新推荐文章于 2025-01-02 08:46:44 发布

阅读量501

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_34241112/article/details/51169798

本文介绍了两种使用JavaScript实现实时时钟的方法。第一种方法通过直接更新div元素来显示时间；第二种方法则利用了输入框展示更详细的时间日期信息，包括星期几等。这两种方法都运用了setTimeout函数确保时间的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>时钟特效</title>
<script type="text/javascript"> 
function disptime(){
 var today = new Date(); //获得当前时间
 var hh = today.getHours();  //获得小时、分钟、秒
 var mm = today.getMinutes();
 var ss = today.getSeconds();
 /*设置div的内容为当前时间*/
 document.getElementById("myclock").innerHTML="<h1>现在是："+hh+":"+mm+":"+ss+"<h1>";
/*
  使用setTimeout在函数disptime()体内再次调用setTimeout
  设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示
*/
  var myTime=setTimeout("disptime()",1000);
}
</script>
</head>
 
<body onload="disptime()">
<div id="myclock"></div>
</body>
</html>
另一种方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" id="time"/>
<div id="time"></div>
<script>
function timebytime(){
var today = new Date();
var year = today.getYear();
var month = today.getMonth();
var date = today.getDate();
var day = today.getDay();
var dayname = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
hour = (hour < 10)? "0" + hour: hour;
minute = (minute < 10)? "0" + minute: minute;
second = (second < 10)? "0" + second: second;
var time = hour + ":" + minute + ":" + second;
time.innerHTML=("现在的时间是"+year+"年"+month+"月"+date + "日" + time + " " + dayname[day]);
setTimeout("timebytime()",1000);
}
timebytime();
</script> 
</body>
</html>