1. 程式人生 > >javascript商品搶購倒計時

javascript商品搶購倒計時

ner start gin 距離 modified 部分 輸出 req parse

完整商品搶購倒計時

搶購倒計時是不能使用本地時間的new Date()的,不然每個人看到的時間是不統一,所以得使用服務器的時間作為初始值

思路:

1、時間統一使用服務器時間(獲取服務器時間方法多種),再讓本地時間和服務器時間有一個差值(偏移量)來確定讓每一臺電腦的時間都是統一

2、使用開始時間、結束時間與本地時間相減,獲取到時間差,再加是偏移量(這裏的時間都轉換成時間戳進行計算)

js部分:

//獲取服務器時間 start -->

var xhr = new XMLHttpRequest();

if(!xhr){

  xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);

}

xhr.open(‘get‘,‘/‘,false);

xhr.setRequestHeader(‘If-Modified-Since‘,‘q‘);

xhr.send();

var timerstr = xhr.getResponseHeader(‘Date‘);

var serverTime = new Date(timerstr);

var dateTime = new Date();

//獲取服務器時間 end -->

//定義函數

function gtime(){

  var nowTime = new Date();

  var difference = dataTime.getTime() - serverTime.getTime();  //本地時間與服務時間的偏移量

  var startTime = new Date(‘2017/06/01 19:00:00‘)   //時間是後臺給的一個時間戳,然後轉換成new Date輸出的格式

  var endTime = new Date(‘2017/06/30 19:00:00‘)   //時間是後臺給的一個時間戳,然後轉換成new Date輸出的格式

  var leftTime = parseInt((startTime.getTime() - nowTime.getTime() + difference))/1000

  var onTime = parseInt((endTime.getTime() - nowTime.getTime() + difference))/1000

  var d = parseInt(leftTime/3600/24);

  var h = parseInt((leftTime/3600)%24);

  var m = parseInt((leftTime/60)%60);

  var s = parseInt(leftTime%60);

  

  var d2 = parseInt(onTime/3600/24);

  var h2 = parseInt((onTime/3600)%24);

  var m2 = parseInt((onTime/60)%60);

  var s2 = parseInt(onTime%60);

  if(leftTime > 0){

    document.getElementById("LeftTime").innerHTML = "距離活動開始還有:" + ‘ ‘ + "<span>" + d + "</span>天<span>" + h + "</span>小時<span>" + m + "</span>分<span>" + s + "</span>秒";

  }else if(onTime > 0){

    document.getElementById("LeftTime").innerHTML = "距離活動結束還有:" + ‘ ‘ + "<span>" + d2 + "</span>天<span>" + h2 + "</span>小時<span>" + m2 + "</span>分<span>" + s2 + "</span>秒";

  }else if(onTime < 0){

    document.getElementById("LeftTime").innerHTML = "活動已結束,請繼續關註我們的動態";

    clearInterval(beginTime);

  }

}

gTime();

var beginTime = setInterval(getTime,1000)

//html部分

<div id="LeftTime"></div>

javascript商品搶購倒計時