Таймер обратного отсчет до нового 2013 Года! Таймер обратного отсчета является довольно простой и классической задачей для javascript. Его можно использовать в каждый год тем что подправить только дату будущего года или события, не обязательно новый год, можно и свои день рождения так же.
Рассмотрим создание счетчика дней до определенной даты и такой же счетчик, но более простой с отсчетом часов, минут и секунд.
Устанавливать можно в любое удобное по размерам место на вашем сайте.
Code
<script language="JavaScript" type="text/javascript">
function count() {
month = 'Jan'; // Месяц даты наступления события
date = '01'; // Число даты наступления события
year = '2013'; // Год даты наступления события
theDate = month + ' ' + date + ' ' + year;
now = new Date();
setdate = new Date(theDate);
timer = (setdate - now) / 1000 / 60 / 60 / 24;
timer = Math.round(timer);
var message = timer + " дней до вашей даты!"; // Текст сообщения на ваш вкус
if (timer == "1") message = timer + " сообытие через день"; // До события один день
if (timer == "0") message = "событие менее чем через день"; // До события менее одного дня
if (timer == "-1") message = "событие наступило"; // Событие наступило
if (timer < "-1") message = ""; // Строка нулевой длины после наступления события
document.write(message);
}
count();
</script>
Вариант с днями, часами, минутами и секундами (отсчет времени до наступления Нового Года):
Code
<script type="text/javascript">
function newYearIn()
{
var days=" дней "
var now = new Date();
var newYear = new Date("Jan,01,2013,00:00:00");
var totalRemains = (newYear.getTime()-now.getTime());
if (totalRemains>1)
{
var RemainsSec=(parseInt(totalRemains/1000));
var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
if (
RemainsFullDays==2 ||
RemainsFullDays==3 ||
RemainsFullDays==4 ||
RemainsFullDays==22 ||
RemainsFullDays==23 ||
RemainsFullDays==24 ||
RemainsFullDays==32 ||
RemainsFullDays==33 ||
RemainsFullDays==34
) {
days=" дня "
}
if (
RemainsFullDays==1 ||
RemainsFullDays==21 ||
RemainsFullDays==31
) {
days=" день "
}
var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
var RemainsFullHours=(parseInt(secInLastDay/3600));
if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
var secInLastHour=secInLastDay-RemainsFullHours*3600;
var RemainsMinutes=(parseInt(secInLastHour/60));
if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
var lastSec=secInLastHour-RemainsMinutes*60;
if (lastSec<10){lastSec="0"+lastSec};
document.getElementById('newyear').innerHTML = "<p style='font-size:22px;'>До Нового Года осталось: "+RemainsFullDays+days+RemainsFullHours+":"+RemainsMinutes+":"+lastSec+"</p>";
setTimeout("newYearIn()",10);
}
else {document.getElementById("newyear").innerHTML = "C НОВЫМ ГОДОМ !!!";}
}
newYearIn();
</script>
Для того чтобы счетчик времени (таймер) до Нового Года появился на странице, необходимо до скрипта на странице расположить любой тег с id="newyear", например:
Code
<p id="newyear">Время, оставшееся до наступления Нового Года</p>
<script type="text/javascript">
function newYearIn()
{ ...
а в сам скрипте установить ту дату нового года, которую вы обычно празднуете (например, ближайший Новый Год в России: "Jan,01,2012,00:00:00").
Для того чтобы поменять шрифт (размер и цвет), нужно убрать теги
и
и вставить описание стиля
Code
<style>p#newyear {font-size:27px; color:pink;}</style>
для строки времени. 2. Для того чтобы разбить строку на две вставьте в нужное место строки "<br>", например так: "До Нового Года осталось: <br>"
Меню сайта
Меню сайта
