単純な時間のカウントダウン

Question

私はカウントダウンのこの種のやろうとしています：

は、今では午前9時20分であると私は1時間に残っているどのように多くの分と秒たい思いを。だから、10分に40分かかります。

このカウントダウンは、このギャップを1日以内に継続的にカウントする必要があります。

私は次のことを試してみたが、それはうまくいきませんでした：

var now = new Date(); 
var mins = now.getMinutes(); 
var secs = now.getSeconds(); 

function initClock(id) { 
    const counter = document.getElementById(id); 

    const minutesItem = counter.querySelector('.js-countdown-minutes'); 
    const secondsItem = counter.querySelector('.js-countdown-seconds'); 

    function updateClock() { 
    mins = now.getMinutes(); 
    secs = now.getSeconds(); 

    minutesItem.innerHTML = (60 - mins); 
    secondsItem.innerHTML = (secs); 

    } 

    updateClock(); 
    const timeinterval = setInterval(updateClock, 1000); 
} 

initClock('js-countdown'); 

秒が更新されていません。

Answer 1

。 updateClock()の繰り返しごとに更新されていません。

コード固定：

function initClock(id, endtime) { 
    const counter = document.getElementById(id); 

    const minutesItem = counter.querySelector('.js-countdown-minutes'); 
    const secondsItem = counter.querySelector('.js-countdown-seconds'); 

    function updateClock() { 
    var now = new Date(), 
     mins = now.getMinutes(), 
     secs = now.getSeconds(); 

    minutesItem.innerHTML = (60 - mins); 
    secondsItem.innerHTML = (secs); 

    } 

    updateClock(); 
    const timeinterval = setInterval(updateClock, 1000); 
} 

initClock('js-countdown', 3600); 

ところで、それらの最初の3行：

var now = new Date(); 
var mins = now.getMinutes(); 
var secs = now.getSeconds(); 

は不要です。

Answer 2

このカウントダウンを見ると、この機能を使用してカウンタの結果を得ることができます。あなたはnow = new Date();をredecalreする必要が

function getCountDown(initDate) { 
 
// Get todays date and time 
 
    var now = new Date().getTime(); 
 

 
    // Find the distance between now an the count down date 
 
    var distance = initDate - now; 
 

 
    // Time calculations for days, hours, minutes and seconds 
 
    var days = Math.floor(distance/(1000 * 60 * 60 * 24)); 
 
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
    var minutes = Math.floor((distance % (1000 * 60 * 60))/(1000 * 60)); 
 
    var seconds = Math.floor((distance % (1000 * 60))/1000); 
 

 
    // Display the result in the element with id="demo" 
 
    return days + "d " + hours + "h " 
 
    + minutes + "m " + seconds + "s " 
 
} 
 
// Set the date we're counting down to 
 

 
var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime(); 
 
var strCounDown = getCountDown(countDownDate) 
 

 
document.getElementById("demo").innerHTML = strCounDown;

<p id="demo"></p>

Answer 3

達成したい目標は、正直であるとはよく言われていません。しかし、カウンターを常に更新したい場合は、updateClock関数が呼び出されるたびにnow変数を更新する必要があります。あなたのupdateClock関数の内部

var now = new Date(); 
var mins = now.getMinutes(); 
var secs = now.getSeconds(); 

：だから、あなたはこれを配置する必要があります。したがって、コードの最初にこれらの行は必要ありません。それ以外に、私はあなたがendtime引数がinitClockの引数を持っている理由を理解していません。

Btwのように、カウントダウンの場合はsecondsItem.innerHTML = (secs);からsecondsItem.innerHTML = (60 - secs);に変更したいと思うかもしれません。