javascript обратный отсчет часов

Question

<script> 
var interval; 
var minutes = 1; 
var seconds = 5; 
window.onload = function() { 
    countdown('countdown'); 
} 

function countdown(element) { 
    interval = setInterval(function() { 
     var el = document.getElementById(element); 
     if(seconds == 0) { 
      if(minutes == 0) { 
       el.innerHTML = "countdown's over!";      
       clearInterval(interval); 
       return; 
      } else { 
       minutes--; 
       seconds = 60; 
      } 
     } 
     if(minutes > 0) { 
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
     } else { 
      var minute_text = ''; 
     } 
     var second_text = seconds > 1 ? 'seconds' : 'second'; 
     el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
     seconds--; 
    }, 1000); 
} 
</script> 

Это хороший обратный отсчет, и я хочу показать время в datalist, как мне это сделать? как на этом сайте www.1buy1.co.il

Answer 1

element В скрипте указан идентификатор тега, который вы передаете функции.
Таким образом, countdown('div1') покажет таймер в теге с идентификатором id = "div1"

Однако ваш конкретный таймер не допускает множественные экземпляры и использует глобальный интервал var.

Генерирование JSON на сервере, а остальное заботится о себе

ЗДЕСЬ является ОО вариант, который является более точным, так как он только вычисления времени окончания вместо того, чтобы полагаться на интервал, который будет блокировать, если браузер заняты: http://jsbin.com/ujuzo5/edit

и вот мое оригинальное решение с помощью хороших людей на SO здесь: Broken closure - please help me fix it

<script type="text/javascript"> 
// generate this on the server and note there is no comma after the last item 
var counters = { 
    "shoes":{"id":"shoe1","minutes":1,"seconds":5}, 
    "trousers":{"id":"trouser1","minutes":10,"seconds":0} 
}; 

var intervals = {}; 

window.onload = function() { 
    for (var el in counters) { countdown(counters[el]) }; 
} 
function countdown(element) { 
    var minutes = element.minutes; 
    var seconds = element.seconds; 

    intervals[element.id] = setInterval(function() { 
     var el = document.getElementById(element.id); 
     if(seconds == 0) { 
      if(minutes == 0) { 
       el.innerHTML = "countdown's over!";      
       clearInterval(intervals[element.id]); 
       return; 
      } else { 
       minutes--; 
       seconds = 60; 
      } 
     } 
     if(minutes > 0) { 
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
     } else { 
      var minute_text = ''; 
     } 
     var second_text = seconds > 1 ? 'seconds' : 'second'; 
     el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
     seconds--; 
     // optionally update the member values 
     element.minutes=minutes; 
     element.seconds=seconds; 
    }, 1000); 
} 

</script> 
shoes: <span id="shoe1"></span><br /> 
trousers: <span id="trouser1"></span><br /> 

Answer 2

Я вычищен код выше и сделал его форматировать, как ваш пример. Он также удаляет глобальные переменные и позволяет создавать несколько таймеров.

Там есть живая связь здесь http://jsfiddle.net/Apnu2/6/

countdown('countdown', 1, 5); 
function countdown(element, minutes, seconds) { 
    // set time for the particular countdown 
    var time = minutes*60 + seconds; 
    var interval = setInterval(function() { 
     var el = document.getElementById(element); 
     // if the time is 0 then end the counter 
     if(time == 0) { 
      el.innerHTML = "countdown's over!";  
      clearInterval(interval); 
      return; 
     } 
     var minutes = Math.floor(time/60); 
     if (minutes < 10) minutes = "0" + minutes; 
     var seconds = time % 60; 
     if (seconds < 10) seconds = "0" + seconds; 
     var text = minutes + ':' + seconds; 
     el.innerHTML = text; 
     time--; 
    }, 1000); 
} 

Answer 3

ответы, которые я вижу здесь работают очень хорошо, но не совсем строгим. Хотя setInterval() кажется правильной функцией для использования, с течением времени он страдает от небольшого «дрейфа». Кроме того, если какая-либо другая функция JavaScript выполняет секунду или более, то ваши обратные часы могут затормозить и показать неправильное время.

Хотя эти события могут быть маловероятными, большая точность на самом деле не сложнее. То, что вы хотите, это таймер, который отталкивает часы от какой-либо неточности. Вам нужно рассчитать время от системных часов, а не от частоты временных интервалов, и для этого вам придется отказаться от setInterval() в пользу серии вызовов setTimeout(). Следующий код показывает, как.

function countdown(elementName, minutes, seconds) 
{ 
    var element, endTime, hours, mins, msLeft, time; 

    function twoDigits(n) 
    { 
     return (n <= 9 ? "0" + n : n); 
    } 

    function updateTimer() 
    { 
     msLeft = endTime - (+new Date); 
     if (msLeft < 1000) { 
      element.innerHTML = "countdown's over!"; 
     } else { 
      time = new Date(msLeft); 
      hours = time.getUTCHours(); 
      mins = time.getUTCMinutes(); 
      element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + 
       ':' + twoDigits(time.getUTCSeconds()); 
      setTimeout(updateTimer, time.getUTCMilliseconds() + 500); 
     } 
    } 

    element = document.getElementById(elementName); 
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500; 
    updateTimer(); 
} 

Попробуйте: http://jsfiddle.net/mrwilk/qVuHW

Если ваши часы должны случайно выровнять очень близко к секундам системных часов, таймер обратного отсчета может появиться в «Мисс биения» из-за получения тайм-аута события просто немного раньше или только немного после односекундного интервала. Решение состоит в том, чтобы выровнять ваши события на полсекунды; то есть на полпути между битами секунд системных часов. Это то, что делают 500 в коде, где 500мс = ½ сек.

Единственное, что стоит отметить, это то, что здесь отображаются часы, а также минуты и секунды; то есть HH: MM: SS. Вычисление часов, минут и секунд с миллисекунд не сложно, но немного неудобно, и проще всего, чтобы объект Date выполнял эту работу для вас.

Answer 4

      <script> 
      var s=3600; 
      var h=Math.floor(s/3600); 
      var m=Math.floor((s%3600)/60); 
      var sec=(s%60); 
      window.clearInterval(x); 
      function clock() 
      { 
      if(m!=0) 
      if(sec==0){ 
      m=m-1; sec=59;} 
      if(h!=0) 
      if(m==0){ 
      h=h-1;m=59; 
      sec=59;} 
      if((m==0&&h==0&&sec==0)) 
      $(this).stop(); 
      --sec; 
      var hr=(h<10? "0":"")+h; 
      var minu=(m<10? "0":"")+m; 
      var second=(sec<10? "0":"")+sec; 
      document.getElementById("time").innerHTML=hr+":"+ minu +":"+second ; 
      } 
      var x=window.setInterval(clock,10); 

      </script>