! Сегодня

Интересное

Творческий уголок

Заработок, Продвижение

Главная » Web и Технологии » Сколько дней осталось до Нового года (скрипт, счётчик, таймер)

Сколько дней осталось до Нового года (скрипт, счётчик, таймер)

Прежде чем диагностировать у себя депрессию и заниженную самооценку, убедитесь, что вы не окружены идиотами.

16-ноября-2022, 21:59   490   0

Сколько дней осталось до Нового года (скрипт, счётчик, таймер)

Всем всем большой привет!!! Если вы ищите счётчик сколько дней осталось до нового года тогда Вы попали по адресу. Сейчас я вам расскажу о нескольких различный таймерах обратного отсчёта до Нового года. И так приступим самый простой скрипт сколько осталось до Нового года реализован на jаvascript. Формат счётчика обратного отсчёта — дни, часы, минуты, секунды. Внешний вид можно настроить при помощью css. Если не работает проверьте подключёны ли у вас скрипты)) 

HTML

 <div id="timer"></div>

CSS

#timer {font: bold 48pt arial}

JS

function getTimer( count ){
    var timer = new Object();
    timer.seconds = count % 60;
    count = (count - timer.seconds) / 60;
    timer.minutes = count % 60;
    count = (count - timer.minutes) / 60;
    timer.hours = count % 24;
    timer.days = (count - timer.hours) / 24;
    return timer;
}

// Вывод таймера
function showTimer( timer ){
    $('#timer').text(
        timer.days.toString() +
        ':' +
        (timer.hours < 10 ? '0' : '') +
        timer.hours.toString() +
        ':' +
        (timer.minutes < 10 ? '0' : '') +
        timer.minutes.toString() +
        ':' +
        (timer.seconds < 10 ? '0' : '') +
        timer.seconds.toString()
    );
}

// поехали
$(document).ready( function(){
    var now =     new Date();                                        // Здесь нужно получить точное время
    var newyear = new Date(now.getFullYear() + 1, 0, 1, 0, 0, 0, 0); 
    var counter = newyear.getTime() - now.getTime();                // милисекунд до НГ
    var timeout = counter % 1000;                                    // Милисекунды до синхронного вывода целых секунд
    counter = (counter - timeout) / 1000;                            // Кол-во секунд до Нового Года   
    showTimer(getTimer(counter + 1));                                // Вывод ближайшей целой секунды
    setTimeout(function(){
        showTimer(getTimer(counter));                                // Синхронный вывод 1-й целой секунды
        var intervalID = setInterval(function(){
            counter--;
            if( counter > 0 ){
                showTimer(getTimer(counter));                        // Синхронный вывод n-й целой секунды
            }else{
                clearInterval(intervalID);
                $('#timer').text('Ура!');
            }
        }, 1000);
    }, timeout);
    
});


Продолжаем еще один простенький скрипт отсчёта времени до Нового года. Скрипт очень прост в настройке и установке на сайт. Настройки очень простые указываем дату, меняем цвет надписи, ну и само поздравление с Новым годом по желанию.
Скрипт отсчёта времени сколько осталось до нового года с лёгкостью можно переделать под свои нужды. К примеру сколько осталось времени до запуска сайта, акции или иного действия.
Для установки таймера отсчёта времени до Нового года достаточно скопировать код к себе на сайт и вставить в нужное место.  Формат счётчика обратного отсчёта — дни, часы, минуты, секунды.

JS

   <!--до нового года осталось-->                        
                         <center>    <span style="font-size:15pt"><script LANGUAGE="jаvascript"> 
document.write('<span id="ny_date">До Нового Года</span>') 
function ojidanieNG() 
{ 
 var today = new Date(); 

 var BigDay = new Date("January 1, 2023"); 
 var timeLeft = (BigDay.getTime() - today.getTime()); 

 var e_daysLeft = timeLeft / 86400000; 
 var daysLeft = Math.floor(e_daysLeft); 

 var e_hrsLeft = (e_daysLeft - daysLeft)*24; 
 var hrsLeft = Math.floor(e_hrsLeft); 

 var e_minsLeft = (e_hrsLeft - hrsLeft)*60; 
 var minsLeft = Math.floor(e_minsLeft); 

 var seksLeft = Math.floor((e_minsLeft - minsLeft)*60); 

 if (BigDay.getTime() > today.getTime() ) 
 document.getElementById("ny_date").innerHTML = 'До <font color=red><b>Нового года</b></font>: <b>'+daysLeft+'</b> дней, <b>'+hrsLeft+'</b> часов, <b>'+minsLeft+'</b> минут, <b>'+seksLeft+'</b> секунд' 
 else 
 document.getElementById("ny_date").innerHTML = '<b>Поздравляем с <font color=red>С Новым 2019 годом</font>!!!</b>' 
} 
setInterval("ojidanieNG()", 50) 
       </script></span>    </center>     <br>        
    <!--до нового года осталось-->


И в продолжение новогодней темы по  как просто организовать отсчёт сколько дней  осталось до нового года. Скрипт количества дней до нового года подходит на любые сайты.  Настройки не замысловаты. Единственный минус наверное только то, что он показывает только количество дней. А возможно это и не минус)) Установка, просто копируем к себе на сайт.

JS

<script type="text/jаvascript" language="jаvascript">
function daysLeftNewYear() {  
  today = new Date()
  //Можно установить любую дату
  nextDate = new Date("December 31, 2023")
  //Количество миллисекунд в одном дне
  msPerDay = 24*60*60*1000;
  //Высчитываем количество дней
  daysLeft = Math.round((nextDate.getTime() - today.getTime())/msPerDay);
  dayname = ""
  ds = ""+daysLeft
  //Вырезаем последнею цифру
  dd=parseInt(ds.substr(ds.length-1))
  //Склоняем слово ДЕНЬ
  if(daysLeft>4&&daysLeft<21)dayname=" дней"
  else
  if(dd==1)dayname=" день"
  else
  if(dd==2||dd==3||dd==4)dayname=" дня"
  else dayname=" дней"
  //Выводим надпись в документ
  if(daysLeft<0) {document.write("С новым годом!!!")}
  else {
  if(daysLeft==0) {document.write("Завтра новый год!")} else {
  document.write("До нового года осталось "+daysLeft+dayname+"!")}
  }
}
</script>
<script type="text/jаvascript" language="jаvascript">daysLeftNewYear()</script> 


Так самый простой скрипт на PHP «таймер обратного отсчета». Он показывает количество дней, дней и часов или дней, часов, минут и секунд (на ваше усмотрение) при каждом открытии страницы с таймером. Его недостаток в том, что он показывает время только при перезагрузке страницы. То есть на открытой странице у Вас секунды «мигать» и меняться не будут. Этот таймер удобно использовать если вы отсчитываете только дни.

PHP

<?php
$endOfDiscount = mktime(0,0,0,01,01,2020); // дата окончания акции последовательность(час,мин,сек,мес,число,год)
$now = time(); // текущее время
$secondsRemaining = $endOfDiscount - $now; // оставшееся время
define('SECONDS_PER_MINUTE', 60); // секунд в минуте
define('SECONDS_PER_HOUR', 3600); // секунд в часу
define('SECONDS_PER_DAY', 86400); // секунд в дне

$daysRemaining = floor($secondsRemaining / SECONDS_PER_DAY); //дни, до даты
$secondsRemaining -= ($daysRemaining * SECONDS_PER_DAY); //обновляем переменную

$hoursRemaining = floor($secondsRemaining / SECONDS_PER_HOUR); // часы до даты
$secondsRemaining -= ($hoursRemaining * SECONDS_PER_HOUR); //обновляем переменную

$minutesRemaining = floor($secondsRemaining / SECONDS_PER_MINUTE); //минуты до даты
$secondsRemaining -= ($minutesRemaining * SECONDS_PER_MINUTE); //обновляем переменную

echo("<h3>До Нового Года осталось:<br/> $daysRemaining дн. $hoursRemaining час. $minutesRemaining мин. $secondsRemaining сек.</h3>"); //выводим сообщение
?>


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

CSS

body {
text-align: center;
background: #CC66CC;
font-family: sans-serif;
font-weight: 100;
}
.countdown-title {
  color: #990066;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
} 
.countdown {
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}
.countdown-number {
  padding: 10px;
  border-radius: 3px;
  background: #9900CC;
  display: inline-block;
}
.countdown-time {
  padding: 15px;
  border-radius: 3px;
  background: #990066;
  display: inline-block;
}
.countdown-text {
  display: block;
  padding-top: 5px;
  font-size: 16px;
}
.deadline-message{
  display: none;
  font-size: 24px;
  font-style: italic;
}
.visible{
  display: block;
}
.hidden{
  display: none;
}


HTML

<h1 class="countdown-title">Таймер обратного отсчета для сайта</h1>
<div id="countdown" class="countdown">
<div class="countdown-number">
<span class="days countdown-time"></span>
<span class="countdown-text">Дни</span>
</div>
<div class="countdown-number">
    <span class="hours countdown-time"></span>
    <span class="countdown-text">Часы</span>
  </div>
  <div class="countdown-number">
    <span class="minutes countdown-time"></span>
    <span class="countdown-text">Минуты</span>
  </div>
  <div class="countdown-number">
    <span class="seconds countdown-time"></span>
    <span class="countdown-text">Секунды</span>
  </div>
</div>
<div id="deadline-message" class="deadline-message">
  Время акции истекло!
</div>


JS

<script>
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
} 
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector(".days");
  var hoursSpan = clock.querySelector(".hours");
  var minutesSpan = clock.querySelector(".minutes");
  var secondsSpan = clock.querySelector(".seconds");
 
  function updateClock() {
    var t = getTimeRemaining(endtime);
 
    if (t.total <= 0) {
      document.getElementById("countdown").className = "hidden";
      document.getElementById("deadline-message").className = "visible";
      clearInterval(timeinterval);
      return true;
    } 
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
  } 
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
 
var deadline = '2021-01-01'; // конечная дата отсчета
initializeClock('countdown', deadline);
</script>

В предпоследней строке кода указываем дату и время окончания работы таймера. Ее можно указать различными способами:

var deadline = '2023-12-31';
var deadline = '31/12/2023';
var deadline = 'December 31 2023';
var deadline="January 01 2023 00:00:00 GMT+0300";

 вариант подойдет для лендингов – чтобы всегда выводилось  например 10 дней (можно указать любое время)

var deadline = new Date(Date.parse(new Date()) + 10 * 24 * 60 * 60 * 1000);

 Ну вот и всё наверное.. Если старания не напрастны, то палец вверх.  А тут для лентяев счётчик)) https://megatimer.ru/. Всех с наступающими зимними праздниками!!!

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Человек быстро решит загадку пять умножить на пять и минус 25 ?

Творческий уголок

Заработок, Продвижение

Редакторы выбирают

Web и Технологии