I needed the simplest script for the countdown to the specified date. All the ready-made solutions that I could find seemed too complicated. I wrote my own, but now I do not know how to check the correctness of its work. It seems to show what I expect:

function getMyDate() { var nowDate = Date.now(); //текущая дата в timestamp var myDate = Date.parse(new Date(2018, 4, 12, 22)); //нужная дата в timestamp var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд var days = parseInt(sec/86400); //количество дней var hours = parseInt(sec/3600)%24; //...часов var mins = parseInt(sec/60)%60; //...минут sec = sec%60; //...секунд document.getElementById('days').innerHTML = days; document.getElementById('hours').innerHTML = hours; document.getElementById('mins').innerHTML = mins; document.getElementById('sec').innerHTML = sec; } setInterval(function() { getMyDate(); }, 1000); 
 table { border-collapse: collapse; } td { padding: 5px; text-align: center; border: 1px solid black; } 
 <h2>ОСТАЛОСЬ</h2> <table> <tr> <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td> </tr> <tr> <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td> </tr> </table>

    2 answers 2

    No, it is not correct, since after reaching the date it goes to - here is the screen:

    enter image description here

    To avoid this case, you need to edit the script as follows:

     function getMyDate() { var nowDate = Date.now(); //текущая дата в timestamp var myDate = Date.parse(new Date(2018, 4, 9, 17)); //нужная дата в timestamp var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд var days = parseInt(sec/86400); //количество дней var hours = parseInt(sec/3600)%24; //...часов var mins = parseInt(sec/60)%60; //...минут sec = sec%60; //...секунд // ниже проверяем не отрицательные ли данные. if( sec >= 0 && mins >= 0 && hours >= 0 && days >= 0) { document.getElementById('days').innerHTML = days; document.getElementById('hours').innerHTML = hours; document.getElementById('mins').innerHTML = mins; document.getElementById('sec').innerHTML = sec; } else { document.getElementById('days').innerHTML = 0; document.getElementById('hours').innerHTML = 0; document.getElementById('mins').innerHTML = 0; document.getElementById('sec').innerHTML = 0; } } setInterval(function() { getMyDate(); }, 1000); 
     table { border-collapse: collapse; } td { padding: 5px; text-align: center; border: 1px solid black; } 
     <h2>ОСТАЛОСЬ</h2> <table> <tr> <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td> </tr> <tr> <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td> </tr> </table>

    • Oh, right! Thank. About care in the minus, I somehow did not even think. And there are no more jambs? Is the logic correct in principle? - humster_spb
    • Yes, the logic is correct, just to - leave, and so order. - Zicrael

    To check, you can replace the current date / time with fake ones:

     { // Машина времени! let diff; let orig = Date.now.bind(Date); Date.now = () => orig() + (diff ? diff : 0); document.getElementById('fakeDTBtn') .addEventListener('click', () => { diff = new Date(document.getElementById('DTNow').value).getTime() - orig(); }) } // Ниже оригинальный код function getMyDate() { var nowDate = Date.now(); //текущая дата в timestamp var myDate = Date.parse(new Date(2018, 4, 12, 22)); //нужная дата в timestamp var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд var days = parseInt(sec/86400); //количество дней var hours = parseInt(sec/3600)%24; //...часов var mins = parseInt(sec/60)%60; //...минут sec = sec%60; //...секунд document.getElementById('days').innerHTML = days; document.getElementById('hours').innerHTML = hours; document.getElementById('mins').innerHTML = mins; document.getElementById('sec').innerHTML = sec; } setInterval(function() { getMyDate(); }, 1000); 
     table { border-collapse: collapse; } td { padding: 5px; text-align: center; border: 1px solid black; } 
     <h2>ОСТАЛОСЬ</h2> <table> <tr> <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td> </tr> <tr> <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td> </tr> </table> <!-- --> <div> <input type="datetime-local" id="DTNow"> <button id="fakeDTBtn">Выставить сейчас</button> </div>

    • No, I don’t need fake dates - I’m manually asking them myself, and not getting them from the user. It was important for me to understand whether days, hours, minutes are counted correctly - I didn’t get it wrong with logic. - humster_spb
    • I gave you a way to tell the script that tomorrow or the day after tomorrow. You asked: "How to check?", I replied: "here it is - see how your timer will look in the future" - vp_arth
    • yes, ok, thanks! - humster_spb