为了让小伙伴们更加高效的完成工作，珍惜每一分每一秒，做了一个倒计时效果，效果图如下，实现代码如下。简单便捷。
倒计时效果如图所示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"><meta/>
<style type="text/css">
.daojishi{
padding: 0;
max-width: 350px;
text-align: center;
line-height: 30px;
box-shadow: 0 0 10px 3px #ddd;
padding: 10px 0;
}
#st{
font-size: 20px;
font-weight: 600;
}
#d{
background: #fe0302;
}
#h{
background: #fea410;
}
#m{
background: #da7092;
}
#s{
background: #0aa0e7;
}
.daojishi span{
font-size: 26px;
color: #fff;
padding:0 5px;
border-radius: 5px;
margin-right: 5px;
font-family:Arial;
}
.daojishi label{
font-size: 14px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="daojishi">
<h3 id="st"></h3>
<p>
<span id="d"></span><label>天</label>
<span id="h"></span><label>时</label>
<span id="m"></span><label>分</label>
<span id="s"></span><label>秒</label>
</p>
</div>
</body>
<script type="text/javascript">
var d = document.getElementById("d");
var h = document.getElementById("h");
var m = document.getElementById("m");
var s = document.getElementById("s");
var st =document.getElementById("st");
getTime();
setInterval(getTime, 1000);
function getTime() {
//获取当前的日期时间
var date = new Date();
//获取某个固定时刻的时间
var thisYear = new Date().getFullYear();
st.innerHTML=(thisYear+1)+"年倒计时";
var oldTime = new Date(thisYear+"-12-31 24:00:00");
//两个事件相减除以1000就是以秒为单位计算取整
var now = parseInt((oldTime - date) / 1000);
//now/3600就是小时
var day = parseInt(now / 3600) /24;
day=Math.floor(day);
document.getElementById("d").innerHTML = addZero(day);
var hour = parseInt(now / 3600) % 24;
h.innerHTML = addZero(hour);
var minutes = parseInt(now / 60) % 60;
m.innerHTML = addZero(minutes);
var seconds = parseInt(now % 60);
s.innerHTML = addZero(seconds);
function addZero(n) {
return n >= 10 ? n : "0" + n;
}
}
</script>
</head>
</html>
网友评论