京东页面倒计时效果的制作

html代码

				
					
京东秒杀
					
FLASH DEALS
					
					
本场距离结束还剩
					

						

							00
						
						

							10
						
						

							40
						
						

							30
						
					
				
			

CSS样式

.flash{
	height: 275px;
	background: #fff;
    overflow: hidden;
    margin-top: 30px;
}
.flash-box1{
	position: relative;
    float: left;
    width: 190px;
    height: 275px;
    background: #e83632;
    color: #fff;
}
.flash-box1-title{
	position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 42px;
    font-size: 34px;
    color: #fff;
}
.flash-box1-sal{
	position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 90px;
    color: #f19999;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
}
.flash-icon{
	position: absolute;
    left: 86px;
    top: 126px;
    display: block;
    width: 20px;
    height: 33px;
    background-image: url(../img/icon.png);
    background-position: -35px -25px;
}
.flash-box1-time{
	position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 170px;
    font-size: 16px;
    color: #fff;
}
.flash-box1-cd{
    position: absolute;
    top: 212px;
    left: 30px;
    height: 40px;
}
.flash-box1-cd-day{
	position: relative;
    float: left;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #2f3430;
    margin-right: 5px;
    display: none;
}
.flash-box1-cd-txt{
	position: relative;
    line-height: 40px;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
}

js脚本代码

 window.onload=function(){
        	showTime();
            function showTime(){
	            var endtime=new Date("2018/11/11,12:10:00")//结束时间
				var nowtime=new Date();//获取当前时间
				var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
				var d=parseInt(lefttime/(24*60*60));
				var h=parseInt(lefttime/(60*60)%24);
				var m=parseInt(lefttime/60%60);
				var s=(lefttime%60);
				document.getElementById("cd-day").innerHTML=d;
				document.getElementById("cd-hour").innerHTML=h;
				document.getElementById("cd-minutes").innerHTML=m;
				document.getElementById("cd-second").innerHTML=s;
			
			 setTimeout(showTime,1000);
                 }
                 }

效果图如下

欢迎一起讨论