批改状态:合格
老师批语:
利用js实现倒计时功能,下面举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>春节过年倒计时</title>
<style>
.box{
width: 1000px;
height: 400px;
background-color: pink;
margin: 5px auto;
text-align: center;
}
span{
font-family: 方正兰亭超细黑简体;
font-size: 40px;
font-weight: bold;
color: #fff;
line-height: 400px;
}
</style>
</head>
<body>
<div class="box">
<span id="span0">距离2019年春节倒计时还有:</span>
<span id="s_t">00天</span>
<span id="s_h">00时</span>
<span id="s_m">00分</span>
<span id="s_s">00秒</span>
</div>
<script>
//获取剩余时间
function gettingTime(){
var now = new Date()
var end = new Date('2019/02/04 00:00:00')//截止时间
var t = end.getTime() - now.getTime() //剩余时间的格林威治时间
var d = Math.floor(t/1000/60/60/24)
var h = Math.floor(t/1000/60/60%24)//计算出小时之后,一天24小时,要对小时取余
var m = Math.floor(t/1000/60%60)//同理,计算出分钟后,一小时60分,要对分钟取余
var s = Math.floor(t/1000%60)//同理
document.getElementById('s_t').innerHTML = d + '天'
document.getElementById('s_h').innerHTML = h + '时'
document.getElementById('s_m').innerHTML = m + '分'
document.getElementById('s_s').innerHTML = s + '秒'
}
setInterval(gettingTime,1000)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号