做一个倒计时的小例子
css样式代码:
body,p{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 500px;
height: 300px;
margin: 50px auto;
border: 1px solid #ccc;
background: #eee;
}
.ipt{
margin: 20px 80px;
}
.div{
width: 340px;
height: 50px;
background: green;
margin-left: 80px;
color: #fff;
margin: 0 auto;
text-align: center;
line-height: 50px;
font-size: 30px;
}
.ta{
margin: 20px 80px;
width: 340px;
height: 150px;
background: #ded;
}
.ta p{
margin: 10px 20px;
}
html的基本结构:
<div class="box">
<input type="text" class="ipt">
<button class="btn">倒计时间</button>
<div class="div"></div>
<div class="ta">
<p>格式如下:</p>
<p>2018-7-19,20:00:00</p>
<p>2018-2-11</p>
</div>
</div>
js代码如下:
var ipt = document.querySelector('.box .ipt');
var btn = document.querySelector('.box .btn');
var div = document.querySelector('.box .div');
var str = '';
btn.onclick = function(){
btn.timer = setInterval(fn,1000);
function fn(){
var val = ipt.value;
var dateNew = new Date(val);
var dateCurrent = new Date();
var millis = parseInt((dateNew - dateCurrent)/1000);
if(millis){
var d = parseInt(millis/(60*60*24));
var h = parseInt((millis%86400)/3600);
var m = parseInt((millis%3600)/60);
var s = parseInt(millis%60);
str = d+'天'+h+'小时'+m+'分钟'+s+'秒';
div.innerHTML = str;
}else{
clearInterval(btn.timer);
div.innerHTML = '我喜欢你';
}
}
}
这样就实现了一个倒计时的例子