要求:用计时器把当前时间的时分秒每1秒钟在页面的p标签中展示一次时间格式(xx:xx:xx的格式),做出一个时钟效果,第一秒页面也要展示一次时间
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p></p>
<script src="myjs.js"></script>
<script>
var oP=document.getElementsByTagName("p")[0];
// setInterval(function(){
// var oTime=new Date(); //每次开始计时器之前,先获取一个时间对象
// oP.innerHTML=timeFormat(oTime)[0]; //因为返回值是一个数组
// },1000);
// 问题:这样写,会在页面刷新的时候等待1000ms再显示在页面上
// 解决:在页面刷新的时候直接调用一次。写法如下:
showTime();
setInterval(showTime,1000);
function showTime(){
var oTime=new Date();
oP.innerHTML=timeFormat(oTime)[0];
}
</script>
</body>
</html>
myjs.js
// 时间格式的封装
function timeFormat(oT){
var iY=oT.getFullYear();
var iM=oT.getMonth();
var iD=oT.getDate();
var iW=oT.getDay(); //获取的星期是从0-6的数字,需要转换才能使用
var iH=oT.getHours();
var iMi=oT.getMinutes();
var iS=oT.getSeconds();
var sW="";
switch(iW){
case 0 : sW="星期日";break;
case 1 : sW="星期一";break;
case 2 : sW="星期二";break;
case 3 : sW="星期三";break;
case 4 : sW="星期四";break;
case 5 : sW="星期五";break;
case 6 : sW="星期六";break;
}
//返回一个数组,第一项是时、分、秒;第二项是年、月、日;第三项的完整的
return [addZ(iH)+":"+addZ(iMi)+":"+addZ(iS),iY+"/"+(iM+1)+"/"+iD,iY+"/"+(iM+1)+"/"+iD+" "+sW+" "+addZ(iH)+":"+addZ(iMi)+":"+addZ(iS)];
}
function addZ(n){//为了实现一位数字前面加0的功能。eg:09:01
return n<10 ? "0"+n : ""+n;
}