简单的倒计时js

2017-07-23  本文已影响0人  riyihu

'''
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>倒计时</title>
<style type="text/css">
.box{
width: 660px;
height: 300px;
background: #181818 url() 0 0 no-repeat;
margin: 0 auto;
}
p.top{
width: 660px;
height: 80px;
border-bottom: 2px solid #A3FE47;
margin: 0 auto;
}

p.i{
    line-height: 80px;
    font-style: normal;
    font-size:45px;
    color: #FFFFFF;
    padding-left: 180px;
}

p.ii{
    line-height: 100px;
    font-style: normal;
    font-size:30px;
    color: #FFFFFF;
}

p.box1{
    width: 100px;
    height: 100px;
    background: #7F7F7F url() 0 0 no-repeat;
    float: left;
    margin-left:50px; 
}
p.bottom{
    width: 550px;
    height: 50px;
    background: #7F7F7F url() 0 0 no-repeat;
    float: left;
    margin-left:50px; 
}

</style>
</head>
<body>

<script type="text/javascript">
window.onload= function(){

var now=new Date();
var atime=now.getTime();

var yd=new Date('2018/01/01 00:00:00');
var btime=yd.getTime();

atime=parseInt(atime);
btime=parseInt(btime);
timec=(btime-atime);
//                      秒  分 时 天
days=Math.floor(timec/1000/60/60/24);//剩余天数

hours=Math.floor(timec/1000/60/60-(days*24));

minutes=Math.floor(timec/1000/60-(days*24*60)-hours*60);
seconds=Math.floor(timec/1000-(days*24*60*60)-hours*60*60-minutes*60);

document.getElementById('day').innerHTML=(days+" 天");
document.getElementById('hour').innerHTML=(hours+" 时");
document.getElementById('minute').innerHTML=(minutes+" 分");
document.getElementById('sec').innerHTML=(seconds+" 秒");

}
</script>

<div class="box">
<p class="top i" id="top">距离高考还有:</p>
<p class="box1 ii" id="day"></p>
<p class="box1 ii" id="hour"></p>
<p class="box1 ii" id="minute"></p>
<p class="box1 ii" id="sec"></p>
<p class="bottom" id="bottom"></p>
</div>

</body>
</html>

上一篇下一篇

猜你喜欢

热点阅读