1.设置剩余时间(时、分、秒)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
#main {
width: 40%;
min-width: 250px;
margin: 0 auto;
height: 80px;
background-color: #000;
color: #FFF;
font-size: 2em;
line-height: 80px;
text-align: center
}
div#form {
width: 400px;
margin: 0 auto;
margin-bottom: 30px
}
input[type="text"] {
width: 50px
}
</style>
</head>
<body>
<div id="form">
<input type="text" id="hour">时
<input type="text" id="min">分
<input type="text" id="s">秒
<button id="start">开始计时</button>
</div>
<div id="main">
<span id="time"></span>
</div>
<script>
document.getElementById("start").onclick = function() {
var hour = document.getElementById('hour').value;
var min = document.getElementById('min').value;
var s = document.getElementById('s').value;
// var ms = document.getElementById('ms').value;
countdown(hour, min, s);
};
// countdown("1", "1", "10");
function countdown(hour, min, s) {
if (s > 0) {
s = String(Number(s) - 1);
} else {
//s==0
if (min > 0) {
min = String(Number(min) - 1);
s = 59;
} else {
// min==0
if (hour == 0) {
timeout = null;
alert("到点啦");
} else {
hour = String(Number(hour) - 1);
min = 59;
s = 59;
}
}
}
var str = format(hour) + ":" + format(min) + ":" + format(s);
console.log(str);
document.getElementById("time").innerText = str;
var timeout = setTimeout(function() {
countdown(hour, min, s);
}, 1000);
}
//格式化时间
function format(str) {
if (String(str).length == 1) {
return "0" + str;
} else if (String(str).length == 2) {
return str;
}
}
</script>
</body>
</html>
2.设置截止时间(天、时、分、秒)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
div#form {
width: 420px;
margin: 0 auto;
margin-bottom: 30px
}
input[type="text"] {
width: 50px
}
#main {
width: 60%;
min-width: 250px;
margin: 0 auto;
height: 80px;
background-color: #000;
color: #FFF;
font-size: 2em;
line-height: 80px;
text-align: center
}
</style>
</head>
<body>
<div id="form">
<label>截止时间:</label><br>
<input type="text" id="year"> 年
<input type="text" id="mon"> 月
<input type="text" id="day"> 日
<br>
<input type="text" id="hour"> 时
<input type="text" id="min"> 分
<input type="text" id="s"> 秒
<button id="start">开始倒计时</button>
</div>
<div id="main">
<span id="time"></span>
</div>
<script>
document.getElementById("start").onclick = function() {
var year = document.getElementById('year').value;
var mon = document.getElementById('mon').value;
var day = document.getElementById('day').value;
var hour = document.getElementById('hour').value;
var min = document.getElementById('min').value;
var s = document.getElementById('s').value;
countdown(year, mon, day, hour, min, s);
};
function countdown(year, mon, day, hour, min, s) {
var nowDate = new Date();
var endDate = new Date(year, mon - 1, day, hour, min, s);
// 转换成和nowTime的格式相同(!注意:获取月是从0开始,因此写月份要减1)
var t = Math.round((endDate - nowDate) / 1000);
// console.log(t);
var DAY = Math.round(t / (60 * 60 * 24));
var HOUR = Math.round((t % (60 * 60 * 24)) / 3600);
var MIN = Math.round((t % (60 * 60)) / 60);
var SCD = Math.round(t % 60);
if (t == 0) {
alert("到点啦")
} else {
var str = format(DAY) + "天" + format(HOUR) + "时" + format(MIN) + "分" + format(SCD) + "秒";
document.getElementById("time").innerText = str;
setTimeout(function() {
countdown(year, mon, day, hour, min, s);
}, 1000);
}
}
//格式化时间
function format(str) {
if (String(str).length == 1) {
return "0" + str;
} else if (String(str).length == 2) {
return str;
}
}
</script>
</body>
</html>