每周重復倒計時

Question

我正在嘗試設置一個倒數計時器，每周四在太平洋標准時間晚上 8 點重復，但是我現在的計時器只是在每個星期五午夜重復。 我試過改變一些變量，但它似乎並沒有改變整體時間。

function CountDown(id, day, time) {

function update() {

    // Get current date and time
    var today = new Date();

    // Get number of days to Friday
    var dayNum = today.getDay();
    var daysToFri = day - (dayNum < day ? dayNum : dayNum - 7);

    // Get milliseconds to noon friday
    var fridayNoon = new Date(+today);
    fridayNoon.setDate(fridayNoon.getDate() + daysToFri);
    fridayNoon.setHours(
        time.split(':')[0],
        time.split(':')[1],
        time.split(':')[2],
        time.split(':')[3]
    );
    // Round up ms remaining so seconds remaining matches clock
    var ms = Math.ceil((fridayNoon - today) / 1000) * 1000;
    var d = ms / 8.64e7 | 0;
    var h = (ms % 8.64e7) / 3.6e6 | 0;
    var m = (ms % 3.6e6) / 6e4 | 0;
    var s = (ms % 6e4) / 1e3 | 0;

    // Display the result in the element with id="demo"
    // document.getElementById(id).innerHTML = d   , h  , m  , s ;style='display:flex; flex-direction:column;'
    // document.getElementById(id).innerHTML = h;
    d = d<10? "0"+d: d;
    h = h<10? "0"+h: h;
    m = m<10? "0"+m: m;
    s = s<10? "0"+s: s;
    document.getElementById(id).innerHTML =  "<div class='clabel'> <p class='countertext'> DAYS </p><h1 class='cnumber days' > "+  d +"</h1></div>" + "<div class='clabel'> <p class='countertext'>HOURS</p><h1 class='cnumber hours'>"+ h +"</h1></div>" + "<div class='clabel'> <P class='countertext'>MINUTES</P><h1 class='cnumber'>"+ m +"</h1></div>"  + "<div class='clabel'><P class='countertext'>SECONDS</p><h1 class='cnumber'>"+ s +"</h1></div>";
    // document.getElementById(id).innerHTML =  "<span  class='c-name'><strong>DAYS</strong></span> " + "<h1 style='font-size:10rem; '>"+ d +"</h1>" + "<span  class='c-name'> <strong>HOURS</strong></span> "
    // + "<h1 style='font-size:10rem;'>"+ h +"</h1>" + "<span class='c-name'> <strong>MINUTES</strong></span> " + "<h1 style='font-size:10rem;'>"+ m +"</h1>" +"<span class='c-name'> <strong>SECONDS</strong></span> " + "<h1 style='font-size:10rem;'>"+ s +"</h1>";

}

// Run update just after next full second
function runUpdate() {
    update();
    setTimeout(runUpdate, 1020 - (Date.now() % 1000));
}

runUpdate();

}

Answer 1

看看這個答案： JS Countdown，可以在特定的日期和時間每周重置

為方便起見，復制下面的解決方案代碼。

var curday;
var secTime;
var ticker;
 
function getSeconds() {
 var nowDate = new Date();
 var dy = 4 ; //Sunday through Saturday, 0 to 6
 var countertime = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),20,30,0); //20 out of 24 hours = 8pm
 
 var curtime = nowDate.getTime(); //current time
 var atime = countertime.getTime(); //countdown time
 var diff = parseInt((atime - curtime)/1000);
 if (diff > 0) { curday = dy - nowDate.getDay() }
 else { curday = dy - nowDate.getDay() -1 } //after countdown time
 if (curday < 0) { curday += 7; } //already after countdown time, switch to next week
 if (diff <= 0) { diff += (86400 * 7) }
 startTimer (diff);
}
 
function startTimer(secs) {
 secTime = parseInt(secs);
 ticker = setInterval("tick()",1000);
 tick(); //initial count display
}
 
function tick() {
 var secs = secTime;
 if (secs>0) {
  secTime--;
 }
 else {
  clearInterval(ticker);
  getSeconds(); //start over
 }