JS 虚拟下单收货时间倒计时特效

效果如下:

Order in the next to get it between and hours minutes

1.在商品的详情页加入购物车按钮附件加入预计发货时间和预估收货的时间的倒计时,促进客户下单的欲望。下面代码是以每天16:00:00作为倒计时,然后往前数2到7天的时间间隔

HTML

<div id="delivery_ppr" class="prt_delivery dn cd" data-timezone="false" data-frm="1" data-cut="SAT,SUN" data-ds="2" data-de="5" data-time="16:00:00" style="display: block;">
<i class="las la-truck fading_true fs__20 mr__5"></i>
Order in the next 
<span class="h_delivery clc"></span>
 to get it between 
 <span class="start_delivery fwm txt_under"></span>
 and 
 <span class="end_delivery fwm txt_under"></span>
            
<span class="dn hr">hours</span>
<span class="dn min">minutes</span>
</div>

JavaScript

<script>
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y =dd.getFullYear();
var m = dd.getMonth()+1;//获取当前月份的日期
switch(m){
	case 1:
	var months = "January";
	break; 
	case 2:
	var months = "February";
	break; 
	case 3:
	var months = "March";
	break; 
	case 4:
	var months = "April";
	break; 
	case 5:
	var months = "May";
	break; 
	case 6:
	var months = "June";
	break; 
	case 7:
	var months = "July";
	break; 
	case 8:
	var months = "August";
	break; 
	case 9:
	var months = "September";
	break; 
	case 10:
	var months = "October";
	break; 
	case 11:
	var months = "November";
	break; 
	case 12:
	var months = "December";
	break; 
				}	
	var d =dd.getDate();
	var days = dd.getDay();
	if(AddDayCount == 7 && d<12){
	d = d-1;
	days = days-1;
	}
	
				 switch(days){
				 	case 0:
				 	var day_er = "Sunday";
					break; 
				 	case 1:
				 	var day_er =  "Monday";
					break; 
				 	case 2:
				 	var day_er =  "Tuesday";
					break; 
				 	case 3:
				 	var day_er =  "Wednesday";
					break; 
				 	case 4:
				 	var day_er =  "Thursday";
					break; 
				 	case 5:
				 	var day_er =  "Friday";
					break; 
				 	case 6:
				 	var day_er =  "Saturday";
					break; 
				 }

if(AddDayCount == 2){
	var title = "nd"; 
}else{
	var title = "th"; 
}
return day_er+", "+d+title+" "+months;
}
function getDistanceSpecifiedTime(dateTime) {
// 指定日期和时间
var EndTime = new Date(dateTime);
// 当前系统时间
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
var Hours = h+' hours '+m+' minutes ';
document.getElementsByClassName('h_delivery')[0].innerHTML = Hours;
var monthStart = GetDateStr(2);
document.getElementsByClassName('start_delivery')[0].innerHTML = monthStart;
var monthEnd = GetDateStr(7);
document.getElementsByClassName('end_delivery')[0].innerHTML = monthEnd;
}
var day = new Date();
//console.log(day);
day.setTime(day.getTime()+24*60*60*1000);
day.setHours(16);
day.setMinutes(00);
day.setSeconds(00);
var daydatee = day.getFullYear()+'/'+ (day.getMonth()+1)+'/'+day.getDate()+' '+day.getHours()+':'+day.getMinutes()+':'+day.getSeconds();
//console.log(daydatee);
getDistanceSpecifiedTime(daydatee)
setInterval("getDistanceSpecifiedTime(daydatee)",1000);
</script>

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论