I use the following countdown timer script:

HTML: <div id="timer1">[clock1]</div>

Javascript:

 <script language="JavaScript"> StartCountDown("timer1","07/31/2013 00:00") function StartCountDown(myDiv,myTargetDate) { var dthen = new Date(myTargetDate); var dnow = new Date(); ddiff = new Date(dthen-dnow); gsecs = Math.floor(ddiff.valueOf()/1000); CountBack(myDiv,gsecs); } function Calcage(secs, num1, num2) { s = ((Math.floor(secs/num1))%num2).toString(); if (s.length < 2) { s = "0" + s; } return (s); } function CountBack(myDiv, secs) { var DisplayStr; var DisplayFormat = "%%D%% %%H%% %%M%% %%S%%"; DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000)); DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24)); DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60)); DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60)); if(secs > 0) { document.getElementById(myDiv).innerHTML = DisplayStr; setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990); } else { document.getElementById(myDiv).innerHTML = "Auction Over"; } } </script>

It is necessary to make each digit of the timer be in a separate diva. For example, 16 minutes is 1 in one div and 6 in another. In this regard, the question: is it possible to divide the output of hours, minutes, seconds, days into separate numbers?

Type of timer:

alt text

    1 answer 1

    Instead:

     setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);

    Better use an anonymous function:

     setTimeout(function (){CountBack(myDiv, secs - 1);}, 990);

    Option A (layout is set manually):

    Option B

    View the jsFiddle working example

    html

     <div id="timer1"> <div id="timer-header">До конца акции осталось:</div> <div id="days"> <div class="left"></div> <div class="right"></div> <div class="delimiter">:</div> <div id="title-days">дни</div> </div> <div id="hours"> <div class="left"></div> <div class="right"></div> <div class="delimiter">:</div> <div id="title-hours">часы</div> </div> <div id="minutes"> <div class="left"></div> <div class="right"></div> <div class="delimiter">:</div> <div id="title-minutes">минуты</div> </div> <div id="seconds"> <div class="left"></div> <div class="right"></div> <div id="title-seconds">секунды</div> </div> </div>

    css

     #timer1 { display:table-cell; } #timer1 > div:first-child { margin:0; } #timer1 div { display:inline-block; } #timer-header { display:block!important; padding-bottom:15px; text-align:center; } #timer1 div[id^="title-"] { display:block; text-align:center; margin-left:-7px; width:100%; } #timer1 #title-seconds { margin:0; } .left, .right, .delimiter { font-size:32px; } .left, .right { background-color:#61890C; color:white; padding:5px; } .left { margin-right:2px; } .delimiter { padding-left:0; }

    javascript

     StartCountDown("timer1", "07/31/2013 00:00"); function StartCountDown(myDiv, myTargetDate) { var dthen = new Date(myTargetDate); var dnow = new Date(); ddiff = new Date(dthen - dnow); gsecs = Math.floor(ddiff.valueOf() / 1000); CountBack(myDiv, gsecs); } function Calcage(secs, num1, num2) { s = ((Math.floor(secs / num1)) % num2).toString(); if (s.length < 2) { s = "0" + s; } return (s); } function CountBack(myDiv, secs) { var timeArr = [], holder; if (secs > 0) { timeArr.days = Calcage(secs, 86400, 100000).split(''); timeArr.hours = Calcage(secs, 3600, 24).split(''); timeArr.minutes = Calcage(secs, 60, 60).split(''); timeArr.seconds = Calcage(secs, 1, 60).split(''); Object.keys(timeArr).map(function (key) { holder = document.getElementById(key); for (var i = 0; i < holder.childNodes.length; ++i) { switch (holder.childNodes[i].className) { case "left": holder.childNodes[i].innerHTML = timeArr[key][0]; break; case "right": holder.childNodes[i].innerHTML = timeArr[key][2]; break; default: break; } } }); setTimeout(function () { CountBack(myDiv, secs - 1); }, 990); } else { document.getElementById(myDiv).innerHTML = "Auction Over"; } }

    Option B (layout generated by the script):

    Option B

    View the jsFiddle working example

    html

     <div id="timer1"></div>

    css

     #timer1 { display:table-cell; } #timer1 > div { margin-left: 5px; } #timer1 > div:first-child { margin: 0; } #timer1 div { display:inline-block; } #timer-header { display:block!important; padding-bottom:15px; text-align:center; } #timer1 div[id^="title-"] { display:block; text-align:center; margin-left:-7px; width:100%; } #timer1 #title-seconds { margin:0; } .left, .right, .delimiter { font-size:32px; } .left, .right { background-color:#61890C; color:white; padding:5px; } .left { margin-right: 5px; } .delimiter { padding-left:5px; }

    javascript

     //Создаем заголовок для таймера createElements("timer1", "timer-header", false, true); //Создаем блоки, которые будут содержать [дни, часы, минуты, секунды] //Блоки будут созданы внутри элемента с id "timer1" ["days", "hours", "minutes", "seconds"].forEach(function (id) { createElements("timer1", id, false, true); //Для каждого блока [дни, часы, минуты, секунды] //Создаем дочерние блоки //Они будут содержать левую и правую цифру соответственно ["left", "right"].forEach(function (child_id) { createElements(id, child_id, true, true); }); //Создаем блоки для разделителей if (id !== "seconds") { createElements(id, 'delimiter', true, true); } //Создаем подписи для значений createElements(id, 'title-' + id, false, true); }); //Задаем заголовок var header = document.getElementById('timer-header'); header.innerHTML = "До конца акции осталось:"; //Выставляем разделители (в примере двоеточие) var delimiter = Array.prototype.slice.call(document.getElementsByClassName('delimiter')); delimiter.forEach(function (div) { div.innerHTML = ":"; }); //Задаем подписи к значениям таймера var days = document.getElementById('title-days'); var hours = document.getElementById('title-hours'); var minutes = document.getElementById('title-minutes'); var seconds = document.getElementById('title-seconds'); days.innerHTML = "дни"; hours.innerHTML = "часы"; minutes.innerHTML = "минуты"; seconds.innerHTML = "секунды"; StartCountDown("timer1", "07/31/2013 00:00"); function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } //++ родительский элемент; //++ идентификатор блока (берется из обрабатываемого массива); //++ true - class="идентификатор блока"; false - id="идентификатор блока"; //++ true - СОЗДАТЬ ВНУТРИ родителя; false - ПРИКРЕПИТЬ ПОСЛЕ родителя function createElements(parent_id, id, create_class, create_child) { create_class = typeof create_class !== 'undefined' ? !! create_class : false; create_child = typeof create_child !== 'undefined' ? !! create_child : false; var div = document.createElement('div'); var parent = document.getElementById(parent_id); if (create_class) { div.className = id; } else { div.id = id; } if (create_child) { parent.appendChild(div); } else { insertAfter(parent, div); } } function StartCountDown(myDiv, myTargetDate) { var dthen = new Date(myTargetDate); var dnow = new Date(); ddiff = new Date(dthen - dnow); gsecs = Math.floor(ddiff.valueOf() / 1000); CountBack(myDiv, gsecs); } function Calcage(secs, num1, num2) { s = ((Math.floor(secs / num1)) % num2).toString(); if (s.length < 2) { s = "0" + s; } return (s); } function CountBack(myDiv, secs) { var timeArr = [], holder; if (secs > 0) { timeArr.days = Calcage(secs, 86400, 100000).split(''); timeArr.hours = Calcage(secs, 3600, 24).split(''); timeArr.minutes = Calcage(secs, 60, 60).split(''); timeArr.seconds = Calcage(secs, 1, 60).split(''); Object.keys(timeArr).map(function (key) { holder = document.getElementById(key); for (var i = 0; i < holder.childNodes.length; ++i) { switch (holder.childNodes[i].className) { case "left": holder.childNodes[i].innerHTML = timeArr[key][0]; break; case "right": holder.childNodes[i].innerHTML = timeArr[key][4]; break; default: break; } } }); setTimeout(function () { CountBack(myDiv, secs - 1); }, 990); } else { document.getElementById(myDiv).innerHTML = "Auction Over"; } }
    • Did not quite understand, but where is it divided? I need to divide not into hours, minutes, seconds. In the question I wrote "For example, 16 minutes is 1 in one div and 6 in another." That is, the number of seconds should be divided into two parts, the number of minutes into two, etc. - Frontender
    • Apparently, inattentively read the question ... Corrected the decision. - VenZell
    • And why if you leave only <div id = "timer1"> [clock1] </ div>, removing <p> .. </ p> ..., does the timer stop displaying? - Frontender
    • Because the script has nowhere to write values. I took it into account and rewrote the decision. Now all the necessary elements are created automatically. - VenZell
    • Updated your answer. I can not explain more clearly. Here is a NEW link to the jsfiddle.net/venzell/BDtJy/4 example - VenZell