日期函数及时钟案例
2019-09-26 本文已影响0人
追马的时间种草
日期对象的基本操作
let time=new Date();
/*
获取当前客户单本地时间
这个时间是可以修改的，所以不能作为重要的从参考依据
Fri Aug 30 2019 13:10:54 GMT+0800 (中国标准时间)
获取的结果不是字符串类型的，属于日期对象（或者说是Data这个类的实例对象）
*/
typeof time; //"object"
标准日期对象中提供了一些属性和方法，供我们操作日期信息
-
getFullYear() 年
-
getMonth()月 返回0-11 一月到12月
-
getDate()日
-
getDay()星期 返回 0-6 周日到周六
-
getHours()
-
getMinute()分
-
getSecond()秒
-
getMilisecond()毫秒
-
getTime()获取当前日期距离1970/1/1 00:00:00的毫秒差
-
toLocalDateString 获取年月日（字符串） 如： "2019/8/30"
-
tolocaleString() 获取完整的日期字符创 如： "2019/8/30 下午1:19:04"
时钟案例：
<body>
<style>
*{
margin:0;
padding: 0;
}
#clockBox{
position: absolute;
right: 0;
top: 0;
padding:0 15px;
line-height: 70px;
font-size: 25px;
color:rgb(223, 16, 51);
background: -webkit-linear-gradient(top left, lightblue, lightcoral, lightcyan) ;
}
</style>
<div id="clockBox">
时间：2019年07月 星期五 上午 10:25：03
</div>
</body>
<script>
let clockBox=document.getElementById('clockBox');
function addZero(val){
val=Number(val);
return val<10?"0"+val:val
}
function queryDate(){
let time=new Date();
let year=time.getFullYear(),
month=time.getMonth()+1,
day=time.getDate(),
week=time.getDay(),
hours=time.getHours(),
minu=time.getMinutes(),
seconds=time.getSeconds();
let weekAry=['7','1',"2",'3',"4","5","6"]
let result=year+"年"+addZero(month)+"月"+addZero(day)+"日";
result+="星期"+weekAry[week]+" ";
result+=addZero(hours)+":"+addZero(minu)+":"+addZero(seconds);
clockBox.innerHTML=result;
}
queryDate();
setInterval(queryDate,1000)
</script>
效果图
动态时钟图
