倒计时
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
width: 400px;
height: 400px;
background-color: #eeeeee;
margin: 50px auto;
text-align: center;
overflow: hidden;
}
h1 {
font-size: 30px;
color: black;
margin: 20px 0 30px;
}
.inputBox input {
width: 70px;
height: 20px;
line-height: 20px;
}
.btn {
width: 100px;
height: 100px;
background-color: red;
color: black;
border-radius: 50%;
margin: 25px auto;
font-size: 40px;
line-height: 100px;
cursor: pointer;
}
.targetDate {
margin-bottom: 30px;
}
.targetDate span {
font-size: 22px;
color: #999999;
}
.reverseTime {
font-size: 30px;
color: #999999;
display: none;
}
<div class="box">
<h1>倒计时</h1>
<div class="inputBox">
请输入 :
<input type="text">年
<input type="text">月
<input type="text">日
</div>
<div class="btn">开始</div>
<p class="targetDate">现在距离-<span></span>-还剩:</p>
<p class="reverseTime"></p>
</div>
var year = document.getElementsByTagName('input')[0];
var month = document.getElementsByTagName('input')[1];
var day = document.getElementsByTagName('input')[2];
var btn = document.getElementsByClassName('btn')[0];
var span = document.getElementsByClassName('targetDate')[0].getElementsByTagName('span')[0];
var p = document.getElementsByClassName('reverseTime')[0];
var timer;
btn.onclick = function () {
var y = year.value;
var m = month.value - 1;
var d = day.value;
console.log(isNaN(y))
console.log(isNaN(d))
console.log(isNaN(m))
if(isNaN(y) || isNaN(d) || isNaN(m)){
alert('请输入数字');
return;
}
p.style.display = 'block';
span.innerHTML = y + '年' + (m + 1) + '月' + d + '日';
clock();
clearInterval(timer)
timer = setInterval(clock, 1000);
function clock() {
//new Date(y, m, d); m的值最大是11
var targetTime = new Date(y, m, d);
var nowTime = new Date();
var time = (targetTime - nowTime) / 1000;
var t = parseInt(time / 86400);
var hr = parseInt(time % 86400 / 3600);
var min = parseInt(time % 3600 / 60);
var sec = parseInt(time % 60);
var str = t + '天' + hr + '小时' + min + '分' + sec + '秒';
p.innerHTML = str;
}
//typeof parseInt(d) == Number? num : alert('请输入数字');
//num = y,m,d == Number? num : alert('请输入数字');
}
效果图