获取时间
var time = new Date()
//Wed Aug 19 2020 20:22:12 GMT+0800 (中国标准时间)
var c = new Date().getTime()
//1597839732075
第二个值为毫秒
时间有关的demo–倒计时
样式:
链接:demo
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: #008000;
font-size: 90px;
text-align: center;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var wantTime = new Date("2020-12-08 20:00:00")
function fun(){
var nowTime = new Date()
var differ = parseInt((wantTime-nowTime)/1000)
var day = parseInt(differ/60/60/24)
day<10?day="0"+day:day
var hour = parseInt(differ/60/60/24-day/24)
hour<10?hour="0"+hour:hour
var minute = parseInt(differ%(60*60)/60)
minute<10?minute="0"+minute:minute
var second = parseInt(differ%60)
second<10?second="0"+second:second
var str = "距离毕业 还有"+day+"天"+hour+"小时"
+minute+"分"+second+"秒"
p1.innerText = str
}
fun()
setInterval(function(){
fun()
},1000)
</script>
</body>
</html>
该函数实现了对目标日期的倒计时.还添加了显示优化效果.
demo—模拟时钟
该函数实现了一个模拟时钟,添加了计时器,并改变其第二个参数,使其改变的速率大大提升,更加流畅.
地址:demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
height: 600px;
width: 600px;
margin: 0 auto;
position: relative;
background: url(images/clock.jpg);
}
img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/hour.png" id="h">
<img src="./images/minute.png" id="m">
<img src="./images/second.png" id="s">
</div>
<script type="text/javascript">
function fn(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var ms = time.getMilliseconds()
s.style.transform = "rotate("+(second+ms/1000 )* 6 +"deg)"
m.style.transform = "rotate("+(minute+second/60) *6 +"deg)"
h.style.transform = "rotate("+(hour+minute/60) *30 +"deg)"
}
fn()
setInterval(function(){
fn()
},10)
</script>
</body>
</html>