<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
margin: 0 auto;
width: 750px;
height: 650px;
background-color: #eeeeee;
text-align: center;
padding-top: 53px;
box-sizing: border-box;
}
h1 {
margin-bottom: 50px;
color: #0000ff;
font-size: 50px;
}
.box1 {
font-size: 27px;
margin-bottom: 40px;
}
input {
width: 160px;
height: 30px;
padding-top: 10px;
box-sizing: border-box;
}
button {
width: 240px;
height: 240px;
background-color: black;
color: #ffff00;
border-radius: 50%;
font-size: 67px;
line-height: 240px;
text-align: center;
}
.a1 {
margin: 15px 0 25px 0;
}
.a1 {
font-size: 26px;
}
.a1 span {
font-size: 35px;
color: #0000ff;
}
.a2 {
font-size: 42px;
}
.a2 span {
font-size: 50px;
color: #0000ff;
}
</style>
</head>
<body>
<div class="wrap">
<h1>倒计时</h1>
<div class="box1">
请输入: <input type="text">年<input type="text">月<input type="text" name="" id="">日
</div>
<button>开始</button>
<p class="a1">
现在距离- <span>0000</span> -还剩:
</p>
<p class="a2">
<span>00</span>天<span>00</span>小时<span>00</span>分<span>00</span>秒
</p>
</div>
<script>
var inp = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
var oSpan = document.getElementsByTagName("span");
btn.onclick = function () {
auto()
setInterval(auto, 1000)
function auto() {
var a = inp[0].value
var b = inp[1].value
var c = inp[2].value
oSpan[0].innerHTML = '' + a + '年' + b + '月' + c + '日'
// 创建未来时间
var futureDate = new Date(a, b, c);
// 创建现在时间
var currentDate = new Date();
var time = (futureDate.getTime()-1) - (currentDate.getTime()-1);
time = parseInt(time / 1000);
var t = parseInt(time / 86400);
var h = parseInt((time % 86400) / 3600);
var m = parseInt((time % 86400 % 3600) / 60);
var s = time % 60;
oSpan[1].innerHTML = suppleZero(t)
oSpan[2].innerHTML = suppleZero(h)
oSpan[3].innerHTML = suppleZero(m)
oSpan[4].innerHTML = suppleZero(s)
}
}
function suppleZero(num) {
return num < 10 ? "0" + num : num;
}
console.log(suppleZero(10))
// // 创建现在时间
// var currentDate = new Date();
// // 创建未来时间
// var futureDate = new Date();
// // 时间差 毫秒单位转成秒 1s = 1000ms
// var time = futureDate.getTime() - currentDate.getTime();
// time = parseInt(time / 1000);
// var t = parseInt(time / 86400);
// console.log(t);
// var h = parseInt((time % 86400) / 3600);
// console.log(h);
// var m = parseInt((time % 86400 % 3600) / 60);
// console.log(m);
// var s = time % 60;
// console.log(s);
// // document.body.innerHTML = "还剩余" + suppleZero(t) + "天" + suppleZero(h) + "时" + suppleZero(m) + "分" + suppleZero(s) + "秒"
// function suppleZero(num) {
// return num < 10 ? "0" + num : num;
// }
</script>
</body>
</html>