js入门篇-动态时钟

最新推荐文章于 2023-12-08 18:53:08 发布

qq_41288095

最新推荐文章于 2023-12-08 18:53:08 发布

阅读量477

点赞数

分类专栏： javascript 文章标签： js动态时钟

本文链接：https://blog.csdn.net/qq_41288095/article/details/89086233

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>动态时钟</title>
 <script src="js/clock.js"></script>
</head>
<body>
 <h1 id="date"></h1>
 <span id="msg"></span>
</body>
</html>

js文件

function showDateTime(){
	 var sWeek = new Array("日","一","二","三","四","五","六");
	 var myDate = new Date();
	 var sYear = myDate.getFullYear();
	 var sMonth = myDate.getMonth()+1;
	 var sDate = myDate.getDate();
	 var sDay = sWeek[myDate.getDay()];
	 var h = myDate.getHours();
	 var m = myDate.getMinutes();
	 var s = myDate.getSeconds();
 //输入日期和星期
	 document.getElementById("date").innerHTML = (sYear+"年"+sMonth+"月"+sDate+"日"+" 星	期"+sDay+"<br>");
	 h = formatTwoDigits(h);//格式化小时，如果不足两位，前面补0
	 m = formatTwoDigits(m);
	 s = formatTwoDigits(s);
//显示时间 
document.getElementById("msg").innerHTML = (h+":"+m+":"+s);
 setTimeout("showDateTime()",1000);//每秒执行一次showdatetime函数
}

window.onload = showDateTime;//页面加载事件执行，调用函数
//如果是一位数，在十位数上补0
function formatTwoDigits(s){
 if(s<10) 
     return "0"+s;
  else
      return s;
  }

setTimeout是window对象的方法，按照指定的时间间隔执行相应的函数。

qq_41288095

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js入门篇-动态时钟

html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态时钟</title> <script src="js/clock.js"></script></head><body&...
复制链接

扫一扫