Javascript / JQuery время обратного отсчета - PullRequest
Новая
       16

Javascript / JQuery время обратного отсчета

5 голосов
/ 08 февраля 2010

Я хочу сделать функцию либо с использованием чистого Javascript, либо с помощью jquery для обратного отсчета до конечного времени, например: 

//consumes a javascript date object
function countDown(endtimme){
...
}

и он должен отображаться в формате HTML, например 

<div id="time_left_box">
    <h1>Time remaining</h1>:

    <p>hours left: ..remaining day will be here## <p>
    <p>minutes left: ##remaining day will be here## <p>
    <p>seconds left: ##remaining day will be here## <p>
</div>

Действительно, и было бы еще лучше, если бы он мог обновляться каждую секунду.

Я очень наивен с javascript и не понимаю, как подойти, любая помощь будет признательна.

Ответы [ 3 ]

7 голосов
/ 08 февраля 2010

Вы можете использовать jQuery Обратный отсчет

5 голосов
/ 08 февраля 2010

Взгляните на это: http://keith -wood.name / countdown.html

2 голосов
/ 09 июля 2014

Это можно сделать на JavaScript без плагинов.

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

var currentTime = new Date(n.getFullYear(), n.getMonth(), n.getDate(), n.getHours(), n.getMinutes(), n.getSeconds(), n.getMilliseconds());

Затем вы найдете разницу между текущим и желаемым временем. Это дается вам в миллисекундах. 

var diff = endtime - currentTime;

Поскольку это возвращается в миллисекундах, вам нужно преобразовать их в секунды, минуты, часы, дни и т. Д. ... Это означает, сколько миллисекунд приходится на каждый знаменатель. Затем вы можете использовать мод и делить, чтобы вернуть число, необходимое для каждого подразделения. Смотри ниже. 

var miliseconds = 1;
var seconds = miliseconds * 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

//Getting the date time in terms of units
//Floored so that they go together (to get just year/days/hours etc.. by themselves you need to use Math.round(diff/desired unit);
var numYears = Math.floor(diff / years);
var numDays = Math.floor((diff % years) / days);
var numHours = Math.floor((diff % days) / hours);
var numMinutes = Math.floor((diff % hours) / minutes);
var numSeconds = Math.round((diff % minutes) / seconds);

Если у вас есть знаменатели, которые вы хотите отобразить, вы можете вернуть их на html-страницу разными способами. Например: 

document.getElementById("tyears").innerHTML = numYears;

Это подводит итог вашего метода. Однако, чтобы запустить его через заданный интервал (именно поэтому вы обновляете отображение HTML в функции JavaScript), вам нужно вызвать следующую функцию, указав имя вашей функции и указав интервал в миллисекундах. 

//Call the count down timer function every second (measured in miliseconds)
setInterval(countDown(endtime), 1000);
...