文章目录
- 一、效果
- 二、思路
- 三、最后
一、效果
用JS实现XXXX年XX月XX日 星期X XX时XX分XX秒 效果
效果 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>time</title>
<script type='text/javascript'>
window.onload=function(){
refreshTime();//当页面加载完时运行时间函数
}
function checkTime(i){
if(i<10){
i='0'+i//定义当分钟，秒钟小于10时，使一位数显示为两位数
}
return i//大于10时，正常显示
}
function refreshTime(){//定义时间函数
var date=new Date();//获取当前默认格式的当前时间
var myYear=date.getFullYear();//在默认格式时间中提取四位数的年份
var myMonth=date.getMonth()+1;//在默认格式时间中提取月份，（月份返回值是0-11，实际月份要返回值+1）
var myDate=date.getDate();//在默认格式实践中提取日期
var myDay=date.getDay();//在默认格式中提取星期（返回值0-6对应星期天-星期六）
var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]//创建数组对应myDay
var myHours=date.getHours();//在默认格式实践中提取日期小时
var myMinutes=date.getMinutes();//在默认格式实践中提取日期分钟
var mySeconds=date.getSeconds();//在默认格式实践中提取日期分钟
var pushM=checkTime(myMinutes);
var pushS=checkTime(mySeconds);//用checkTime函数使时间为0~9时替换为00~09
//alert(myDay);//test
document.getElementById('time').innerHTML=myYear+'年'+myMonth+'月'+myDate+'日 '+week[myDay]+' '+myHours+':'+pushM+':'+pushS+'<br/>'//使id为'time'的文本值替换为该格式的时间
setTimeout(refreshTime,1000)//每1000毫秒运行一次refreshTime函数，即每秒刷新一次时间
}
</script>
</head>
<body>
<span id='time'>clock</span>
</body>
</html>
二、思路
主要思路是先定义一个实时时间：
var date=new Date();
再从实时时间中提取需要用到的年、月、日、时、分、秒、星期：
var myYear=date.getFullYear();
var myMonth=date.getMonth()+1;//在默认格式时间中提取月份，（月份返回值是0-11，实际月份要返回值+1）
var myDate=date.getDate();
var myDay=date.getDay();
var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]
var myHours=date.getHours();
var myMinutes=date.getMinutes();
var mySeconds=date.getSeconds();
其中星期几要用week[myDay]显示。
月份返回值是0-11，所以实际月份要返回值+1。
但此时页面显示的时间是静止的，这里要用setTimeout()或者setInterval()
实现定时刷新。
将整个静止时间的js定义成一个函数refreshTime()方法；
setTimeout(refreshTime,1000)
每隔1s执行一次refreshTime()方法，即数字时钟的效果
此时还有个小问题：
每当分钟、秒钟小于10时会显示0~9，如22:9:5的效果如何变成22:09:05的效果呢？
可以定义一个方法在分钟秒钟的值是0~9时变成00~09
function checkTime(i){
if(i<10){
i='0'+i//定义当分钟，秒钟小于10时，使一位数显示为两位数
}
return i//大于10时，正常显示
}
再将分钟、秒钟重新定义
var pushM=checkTime(myMinutes);
var pushS=checkTime(mySeconds);
这样就能显示正确的实时时间啦~
三、最后
本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕
