JS制作一个倒计时

页面

<div id="box1">
       <div id="box2"></div>
       <div id="box5">:</div>
       <div id="box3"></div>
       <div id="box6">:</div>
       <div id="box4"></div>
	</div>

样式

<style>
       #box1{
       	 width: 300px;
       	 height:50px; 
       	 margin: 50px  auto
       }
       #box2,#box3,#box4,#box5,#box6{
       	width: 50px;
       	height: 50px;
       	background-color: red;
       	float: left;
       	margin-left: 10px;
       	border-radius: 10px;
       	font-size: 25px;
       	text-align: center;
       	line-height: 50px;
       }
    </style>

JS

<script type="text/javascript">
    var box2=document.getElementById('box2');
    var box3=document.getElementById('box3');
    var box4=document.getElementById('box4');
	var targetTime = new Date('December 31,2018 00:00:00');
	//定义目标时间
    function timer(){
	var currentTIme = new Date();
	var t = parseInt( (targetTime - currentTIme)/1000 );
	var day = parseInt(t/86400);
	var hours = parseInt(t%86400/3600);
	var min = parseInt(t%3600/60);
	var sec = t%60;

	box2.innerHTML=toZero(hours);
	box3.innerHTML=toZero(min);
	box4.innerHTML=toZero(sec);
	}
	 timer();
	 setInterval(timer,1000);
//时间格式化，补零操作
function toZero( num ) {
	var result = '';
	if( num < 10 ){
		result = '0' + num;
	}else{
		result = '' + num;
	};
    return result;

};
</script>

效果图