倒计时
2017-01-09 本文已影响0人
Lamport
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
background: #f7f7f7;
}
h1{
text-align: center;
line-height:40px;
margin-top: 20px;
}
#box{
width: 600px;
height: 300px;
box-shadow: 0 0 5px #aaa;
margin: 10px auto;
position: relative;
}
#box p{
position: absolute;
top: 10px;
left: 10px;
color: #DDDDDD;
font-size: 25px;
}
#box p span{
color: greenyellow;
}
#box b{
display: block;
font-size: 55px;
line-height: 320px;
text-align: center;
}
#objective{
width: 587px;
height: 24px;
margin: 0 auto;
line-height: 24px;
}
input{
width: 50px;
height: 20px;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>倒计时</h1>
<div id="box">
<p>距离<span id="spanYear"></span> 年<span id="spanMonth"></span> 月<span id="spanDay"></span> 日<span id="spanHour"></span> 时<span id="spanMinute"></span> 分<span id="spanSecond"></span> 秒 还有:</p>
<b id="main"></b>
</div>
<div id="objective">
<input type="number" id="year"/> 年
<input type="number" id="month"/> 月
<input type="number" id="day"/> 日
<input type="number" id="hour"/> 时
<input type="number" id="minute"/> 分
<input type="number" id="second"/> 秒
<button id="btn">生成倒计时</button>
</div>
<script>
function $(id) {
return document.getElementById(id);
};
var timer = null;
$("btn").onclick = function () {
timer = setInterval(run,1000);
};
function run(){
var valYear = $("year").value;
var valMonth = $("month").value - 1;
var valDay = $("day").value;
var valHour = $("hour").value;
var valMinute = $("minute").value;
var valSecond = $("second").value;
$("spanYear").innerHTML = ' ' + valYear;
$("spanMonth").innerHTML = ' ' + valMonth + 1;
$("spanDay").innerHTML = ' ' + valDay;
$("spanHour").innerHTML = ' ' + valHour;
$("spanMinute").innerHTML = ' ' + valMinute;
$("spanSecond").innerHTML = ' ' + valSecond;
//获取现在的系统时间
var getDate = new Date();
//设置结束的系统时间
var setDate = new Date( valYear,valMonth,valDay,valHour,valMinute,valSecond );
//结束时间距现在的毫秒数
var disparity = setDate - getDate;
if ( disparity < 0 ){
clearInterval(timer);
$("main").innerHTML = "非常抱歉，您输入的时间已经过去，无法进行倒计时";
$("main").style.fontSize = 25 + 'px';
return;
};
//计算剩余天数
var surplusDay = parseInt( disparity / 1000 / 60 / 60 / 24 );
//计算剩余小时数
var surplusHour = parseInt( disparity / 1000 / 60 / 60 % 24 );
//计算剩余分钟数
var surplusMinute = parseInt( disparity / 1000 / 60 % 60 );
//计算剩余秒数
var surplusSecond = parseInt( disparity / 1000 % 60 );
//如果时间是个位数，则在前面拼接一个 0
function Zero( n ){
if( n < 10 && n >= 0 ){
n = '0' + n;
};
return n;
};
$("main").innerHTML = surplusDay + '天' + Zero(surplusHour) + '小时' + Zero(surplusMinute) + '分' + Zero(surplusSecond) + '秒';
};
</script>
</body>
</html>
