最近做商品的秒杀活动需求如下
1.活动前有预热期提示如 距开始：01:00:00:00 （天 时 分 秒）；
2..活动时有距活动结束提示如 距结束：01:00:00:00 （天 时 分 秒）；
代码如下
css部分
.tiemBox{
position:relative;
top:240px;
width:100%;
height:66px;
margin:0 auto;
}
.timeTitle{
font-size:14px;
font-weight:800;
color:rgba(43,43,43,1);
text-align:center;
padding-top:0.4rem;
}
.countDown{
display:block;
text-align:center;
}
.countDownTimeBox{
width:190px;
height:20px;
margin:0 auto;
font-size:12px;
display:inline-block;
}
.countDown .countDownTimeBox .countDownTime{
width:30px;
height:20px;
letter-spacing:2px;
float:left;
background:rgba(255,91,76,1);
color:#fff;
font-weight:500;
font-size:18px;
margin:0;
text-align:center;
margin-top:5px;
line-height:20px;
padding-left:2px;
}
.countDown .countDownTimeBox .countDownTime:nth-child(1){
margin-left:0;
}
.colon{
width:10px;
float:left;
line-height:30px;
color:#2b2b2b;
text-align:center;
}
.countDownWord{
font-size:12px;
color:rgba(43,43,43,1);
}
HTML部分
<div class="tiemBox">
<div class="timeTitle">秒杀中,下手要快哦</div>
<span class="countDown">
<span class="countDownWord">距结束:</span>
<div class="countDownTimeBox">
<span class="countDownTime">00</span>
<div class="colon">:</div>
<span class="countDownTime">00</span>
<div class="colon">:</div>
<span class="countDownTime">00</span>
<div class="colon">:</div>
<span class="countDownTime">00</span>
</div>
</span>
</div>
js部分
function showTime(){
var startTime='2019/06/25 23:59:59';
var endTime='2019/07/10 23:59:59'
var date1 = new Date();
var date2 = startTime;
var date3 = new Date(date2).getTime()-date1.getTime(); //时间差的毫秒数
date3>0?($('.countDownWord').html('距开始:')):($('.countDownWord').html('距结束:'),date3 = new Date(endTime).getTime()-date1.getTime());
//天数
var days = Math.floor(date3 / (60 * 60 * 24*1000));
var leave1=date3%(24*3600*1000); //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
//计算相差秒数
var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);
if(days<=0&&hours<=0&&minutes<=0&&seconds<=0){
$(".countDownTimeBox").html('<span class="countDownTime">00</span><div class="colon">:</div><span class="countDownTime">00</span><div class="colon">:</div><span class="countDownTime">00</span><div class="colon">:</div><span class="countDownTime">00</span>');
clearTimeout("showTime()")
}else{
if(days<10 && days>=0){
days="0"+days;
}
if(hours<10 && hours>=0){
hours="0"+hours;
}
if(minutes<10 && minutes>=0){
minutes="0"+minutes;
}
if(seconds<10 && seconds>=0){
seconds="0"+seconds;
}
$(".countDownTimeBox").html('<span class="countDownTime">'+days+'</span><div class="colon">:</div><span class="countDownTime">'+hours+'</span><div class="colon">:</div><span class="countDownTime">'+minutes+'</span><div class="colon">:</div><span class="countDownTime">'+seconds+'</span>');
setTimeout("showTime()", 1000);
}
}
最终效果如下
image
image
