一、定义Date类型
var time=new Date()
二、方法
time.getTime()
//1970年1月1日到此时此刻的毫秒数
time.getFullYear()
//获取当前年份
time.getMonth+1()
//0-11获取月份
time.getDate()
//获取当前日期
time.getHours()
//获取当前小时数
time.getMinutes()
//获取当前分钟数
time.getSeconds()
//获取当前秒数
time.Milliseconds()
//获取毫秒数
time.getDay()
//获取星期几(0表示周天)
三、定时调用函数
setInterval(go,1000)
//go是调用的函数名;1000是与调用函数之间的时间间隔,以毫秒计(1000ms=1s)最低值为20ms
clearInterval(go,1000)
//取消setInterval(go,1000)函数设定的定时执行操作
四、举例
例一、表的制作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>钟表</title>
<style>
#clock{
width: 600px;
height: 600px;
position: relative;
margin: 100px auto;
background: url(clock.jpg) no-repeat;
}
#clock div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#h{
background: url(hour.png) no-repeat center center;
}
#m{
background: url(minute.png) no-repeat center center;
}
#s{
background: url(second.png) no-repeat center center;
}
</style>
</head>
<body>
<div id="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<script>
var hh=document.getElementById("h");
var mm=document.getElementById("m");
var ss=document.getElementById("s");
function clock(){
var d=new Date();
var ms=d.getMilliseconds();
var s=d.getSeconds()+ms/1000;
ss.style.transform='rotate(' +s*6+ 'deg)'
var m=d.getMinutes()+d.getSeconds()/60;
mm.style.transform='rotate(' +m*6+ 'deg)'
var h=d.getHours()+d.getMinutes()/60;
hh.style.transform='rotate(' +h*30+ 'deg)'
}
clock()
setInterval(clock,1000);
</script>
</body>
</html>
运行结果如下图:
例二、倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<div id="box">
</div>
<script>
var div=document.getElementById("box");
function go(){
var time=new Date;
var ftime=new Date(2017,5,15,16,50,0);
var daoji=Math.floor((ftime.getTime()-time.getTime())/1000);
var d=Math.floor(daoji/86400);
var h=Math.floor(daoji%86400/3600);
var m=Math.floor(daoji%86400%3600/60);
var s=Math.floor(daoji%60);//%取余
var str='剩余:'+d+'天'+h+'小时'+m+'分'+s+'秒'
div.innerHTML=str;
}
go()
setInterval(go,1000);
</script>
</body>
</html>
运行结果如下图所示: