обратный отсчет времени javascript / jquery

Question

Я хочу создать функцию, либо использующую чистый 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 и не знаю, как подойти, буду признателен за любую помощь.

Answer 1

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

Answer 2

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

Answer 3

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

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

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

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

var diff = endtime - currentTime;

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

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);