2016-12-02 52 views
1

嗨我一直在嘗試採取和使用一些代碼,我可以部分工作,我想倒計時,我們可以設置一個結束時間倒計時到(顯然是顯而易見的),我們也希望將其設置爲僅在一天中的特定時間以及僅在一週中的某幾天顯示。Javascript倒計時顯示/隱藏在指定的天數和時間

我已經設法讓下面的工作,所以我們可以設置一天的時間來顯示,但我不能得到它的工作,所以它只顯示在某些特定的日子。任何人都可以幫忙嗎?

var countdownMessage = "This ends in"; 
 
var now = new Date(); 
 
var time = now.getTime(); // time now in milliseconds 
 
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs 
 

 
//////////////////////////* Countdown */////////////////////////////// 
 
function getSeconds() { 
 
    var ft = countdownEnd.getTime() + 86400000; // add one day 
 
    var diff = ft - time; 
 
    diff = parseInt(diff/1000); 
 
    if (diff > 86400) { 
 
    diff = diff - 86400 
 
    } 
 
    startTimer(diff); 
 
} 
 

 
var timeInSecs; 
 
var ticker; 
 

 
function startTimer(secs) { 
 
    timeInSecs = parseInt(secs); 
 
    ticker = setInterval("tick()", 1000); 
 
    tick(); // to start counter display right away 
 
} 
 

 
function tick() { 
 
    var secs = timeInSecs; 
 
    if (secs > 0) { 
 
    timeInSecs--; 
 
    } else { 
 
    clearInterval(ticker); // stop counting at zero 
 
    //getSeconds(); // and start again if required 
 
    } 
 

 
    var hours = Math.floor(secs/3600); 
 
    secs %= 3600; 
 
    var mins = Math.floor(secs/60); 
 
    secs %= 60; 
 
    var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds"; 
 
    document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result; 
 
} 
 

 

 
///////////////* Display at certain time of the day *////////////////// 
 

 
//gets the current time. 
 
var d = new Date(); 
 
if (d.getHours() >= 7 && d.getHours() <= 15) { 
 
    $("#countdown").show(); 
 
} else { 
 
    $("#countdown").hide(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body onload="getSeconds()"> 
 

 
    <span id="countdown" style="font-weight: bold;"></span> 
 

 
</body>

[編輯]

只需添加到這一點,我試圖改變腳本的一部分來這一點,但沒有奏效:

$(function() { 
$("#countdown").datepicker(
    { beforeShowDay: function(day) { 
     var day = day.getDay(); 
     if (day == 1 || day == 2) { 
      //gets the current time. 
      var d = new Date(); 
      if(d.getHours() >= 7 && d.getHours() <= 10){ 
       $("#countdown").show(); 
      } 
      else { 
       $("#countdown").hide(); 
      } 
     } else { 
      $("#countdown").hide(); 
     } 
    } 
}); 

}) ;不管你做

+0

請定義「沒有工作」。您收到錯誤消息,或者它不按照您的預期方式工作?舉個例子。 – ADyson

+0

嗨,它只是忽略了我的代碼,所以我設置了開始和結束時間,當它超出這些時間時隱藏,但是當我添加代碼來指定星期幾時,無論開始和結束的是什麼,它都沒有任何不同我調整日期。 – Chobbit

回答

2

是除了setInterval部分都好,你是路過的字符串值作爲setInterval("tick()", 1000)而不是函數引用作爲setInterval(tick, 1000)

而且,我已經更新了代碼如下檢查隨着特定的一天你有特定的時間,

var d = new Date(); 
var day = d.getDay(); 

if (day == 0 || day == 6) { 
    if (d.getHours() >= 0 && d.getHours() <= 8) { 
    $("#countdown").show(); 
    } else { 
    $("#countdown").hide(); 
    } 
} 

你可以給一個嘗試下面,

var countdownMessage = "This ends in"; 
 
var now = new Date(); 
 
var time = now.getTime(); // time now in milliseconds 
 
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs 
 

 
//////////////////////////* Countdown */////////////////////////////// 
 
function getSeconds() { 
 
    var ft = countdownEnd.getTime() + 86400000; // add one day 
 
    var diff = ft - time; 
 
    diff = parseInt(diff/1000); 
 
    if (diff > 86400) { 
 
    diff = diff - 86400 
 
    } 
 
    startTimer(diff); 
 
} 
 

 
var timeInSecs; 
 
var ticker; 
 

 
function startTimer(secs) { 
 
    timeInSecs = parseInt(secs); 
 
    ticker = setInterval(tick, 1000); 
 
    tick(); // to start counter display right away 
 
} 
 

 
function tick() { 
 
    var secs = timeInSecs; 
 
    if (secs > 0) { 
 
    timeInSecs--; 
 
    } else { 
 
    clearInterval(ticker); // stop counting at zero 
 
    //getSeconds(); // and start again if required 
 
    } 
 

 
    var hours = Math.floor(secs/3600); 
 
    secs %= 3600; 
 
    var mins = Math.floor(secs/60); 
 
    secs %= 60; 
 
    var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds"; 
 
    document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result; 
 
} 
 

 
$("#countdown").hide(); 
 

 
///////////////* Display at certain time of the day *////////////////// 
 

 
//gets the current time. 
 
var d = new Date(); 
 
var day = d.getDay(); 
 

 
if (day == 0 || day == 6) { 
 
    if (d.getHours() >= 0 && d.getHours() <= 8) { 
 
    $("#countdown").show(); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body onload="getSeconds()"> 
 

 
    <span id="countdown" style="font-weight: bold;"></span> 
 

 
</body>

+0

感謝您的反饋和抱歉,我實施了這個功能,並且在週末前星期五一直在玩它,但它似乎無法工作,甚至在我運行代碼片段時也不適用於我,所以我不知道最新消息上。當我甚至嘗試複製並粘貼你的整個代碼時,在8am之後顯示定時器之外的代碼參數,並且如果我將天數調整爲2 || 3它仍然顯示倒計時,而不是隱藏,如果它忽略了整個if else語句。請問有任何進一步的幫助嗎?謝謝 – Chobbit

+0

當你複製粘貼我的代碼時,你應該改變我在'if(day == 0 || day == 6)'提到的那一天,並且你應該改變'if(d.getHours()> = 0 && d.getHours()<= 8){'。僅供參考,'天開始於'0至6',其中'0'是'週日' – Aruna

+0

對不起,我一定不是很清楚,所以我在星期五(第5天)大約下午2點把你的代碼,所以我改變了代碼:if(day == 2 || day == 3)然後也改變了:if(d.getHours()> = 18 && d.getHours()<= 19)應該隱藏倒計時;因爲它應該只顯示星期二晚上6點到週二晚上7點之間的倒計時;但事實並非如此。我剛剛再次嘗試了相同的代碼,結果相同。我真的想給你聲譽和回答標記,但它不適合我,是否爲你自己工作?謝謝 – Chobbit