There is a timer:

function update() { var Now = new Date(), Finish = new Date(); Finish.setHours( 23); Finish.setMinutes( 59); Finish.setSeconds( 59); if( Now.getHours() === 23 && Now.getMinutes() === 59 && Now.getSeconds === 59) { Finish.setDate( Finish.getDate() + 1); } var sec = Math.floor( ( Finish.getTime() - Now.getTime()) / 1000); var hrs = Math.floor( sec / 3600); sec -= hrs * 3600; var min = Math.floor( sec / 60); sec -= min * 60; $(".timer .hours").text( pad(hrs)); $(".timer .minutes").text( pad(min)); $(".timer .seconds").text( pad(sec)); setTimeout( update, 200); } function pad(s) { return ('00'+s).substr(-2) } update();

Now hours, minutes and seconds are displayed in the corresponding block. How to divide the hours / minutes / seconds into 2 parts to display in the following format:

 <div class="timer"> <div class="hours"> <span>0</span> <span>5</span> </div> <div class="minutes"> <span>3</span> <span>4</span> </div> <div class="seconds"> <span>2</span> <span>2</span> </div> </div>

    1 answer 1

     function pad(s) { //преобразуем в строку с 2мя цифрами s=('00'+s).substr(-2); //отправляем каждую цифру в соответствующий блок return '<span>' + s[0] + '<span></span>' + s[1] + '</span>'; } console.log(pad(2)) console.log(pad(23))

    Accordingly, instead of

     $(".timer .hours").text( pad(hrs));

    use

     $(".timer .hours").html( pad(hrs));