новогодний счетчик

Счетчик до Нового Года (новогодний счетчик)

MnogoBlog > WordPress > Дизайн > Javascript и jQuery > Счетчик до Нового Года (новогодний счетчик)
Добавить комментарий

Здравствуйте, сегодня будем создавать на своем сайте – Новогодний Счетчик – Обратный отсчет – сколько осталось до Нового Года! Рассмотрим плагины и скрипты.

Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

Начнем с плагинов для wordpress сайтов:

1. Christmas Countdown Widget

Сведения о плагине:

Последнее обновление: 2014-3-1

Загрузок: 10,502

Сайт плагина в бесплатном репозитории wordpress: “wordpress.org/plugins/santas-christmas-countdown/”

Результат – можно вставить вот такой симпатичный счетчик в любом месте на вашем сайта – в сайдбар (виджет), в записи и странички с помощью шорткода:

новогодний счетчик

Проблемы:

– надпись сколько дней осталось до Рождества на английском;

– в нашей стране Рождество празднуется после Нового Года.

Решения:

Для решения вышеуказанным проблем достаточно изменить файл scriptfile.js плагина Christmas Countdown Widget (кликните по картинке для увеличения):

newyear1

Все что вам нужно сделать – это зайти в панель управления wordpress, в левом меню выбрать пункт “Плагины”, его подпункт “Редактор”, справа в строке “Выберите плагин для изменения  – Christmas Countdown Widget”, далее с права в списке “Файлы плагина” выберите файл scriptfile.js и измените в нем цифру 25 на цифру 31, а также текст, который будет выводиться аналогично как это сделано на скриншоте выше.

Также можете скачать уже измененный мною плагин – Christmas Countdown Widget – скачать.

В итоге у вас получиться следующее:

новогодние плагины wordpress

 

 

2. Christmas Countdown Clock

Сведения о плагине:

Последнее обновление: 2013-8-7

Загрузок: 8,302

Сайт плагина в бесплатном репозитории wordpress: “wordpress.org/plugins/christmas-countdown-clock/”

 

3. WordPress Countdown Timer

Сведения о плагине:

Последнее обновление: 2014-3-14

Загрузок: 11,064

Сайт плагина в бесплатном репозитории wordpress: “wordpress.org/plugins/wp-countdown-timer/”

 

4. Countdown Clock

Сведения о плагине:

Последнее обновление: 2014-9-4

Загрузок: 49,076

Сайт плагина в бесплатном репозитории wordpress: “wordpress.org/plugins/countdown-clock/”

 

5. Page Expiration Robot – Countdown Timer

Сведения о плагине:

Последнее обновление: 2014-11-4

Загрузок: 12,686

Сайт плагина в бесплатном репозитории wordpress: “wordpress.org/plugins/page-expiration-robot/”

 

 

Скрипты:

Для их использования – достаточно вставить их (код скрипта) в Виджет “Текст” в вашей админке wordpress (картинка кликабельна):

newyear4

1. До определенной даты сколько осталось дней часов минут секунд:

скрипт счетчика до нового года 

<script language="javascript" type="text/javascript">
<!-- Begin
function getTime() {
now = new Date();
y2k = new Date("Jan 1 2015 00:00:00");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " second." : " seconds.";
min = (minutesRound == 1) ? " minute" : " minutes, ";
hr = (hoursRound == 1) ? " hour" : " hours, ";
dy = (daysRound == 1)  ? " day" : " days, "
document.timeForm.input1.value = "Time remaining: " + daysRound  + dy + hoursRound + hr + minutesRound + min + secondsRound + sec;
newtime = window.setTimeout("getTime();", 1000);
}
window.onload=getTime;
//  End -->
</script>
Date:  Jan 1, 2015 00:00:00 p.m.
<form name=timeForm>
<input type=text name=input1 size=70 border-style="none" style="border-bottom: 0px solid; border-left: 0px solid;border-right: 0px solid;border-top: 0px solid;font:14px arial, helvetica,sans-serif">
</form>

 

2. До определенной даты сколько осталось дней:

newyear6 

<script language="javascript" type="text/javascript">

<!-- Begin
var day_description = "Christmas";
var day_before = "Christmas Eve";

var today = new Date();
var year = today.getYear();
if ((navigator.appName == "Microsoft Internet Explorer") && (year < 2000))
year="19" + year;
if (navigator.appName == "Netscape")
year=1900 + year;
var date = new Date("December 25, " + year);
var diff = date.getTime() - today.getTime();
var days = Math.floor(diff / (1000 * 60 * 60 * 24));

document.write("<center><h3>")

if (days > 1)
document.write("There are " + (days+1) + " days until " + day_description + "!");
else if (days == 1)
document.write("Tommorrow is " + day_before  + "!");
else if (days == 0)
document.write("Today is " + day_before + "!");
else if (days == -1)
document.write("It's " + day_description + "!");
else if (days < -1)
document.write(day_description + " was " + ((days+1)*-1) + (days < -2 ? " days" : " day") + " ago this year!");
document.write("</h3></center>");
//  End -->
</script>

 

3. Еще один код:

newyear5 

<script language="javascript" type="text/javascript">

var timerID = null;
var timerRunning = false;
function stopclock (){
        if(timerRunning)
                clearTimeout(timerID);
        timerRunning = false;
}

function startclock () {
        // Make sure the clock is stopped
        stopclock();
        showtime();
}

function showtime () {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        var date = now.getDate();
        var month = now.getMonth() + 1;
        var year = now.getYear();
        if (year < 1000)
         year+=1900

        var timeValue = "" + ((hours < 10 ) ? "0" : "") + hours
        // var timeValue = "" + ((hours >12) ? hours -12 :hours)
        timeValue += ((minutes < 10) ? ":0" : ":") + minutes
        timeValue += ((seconds < 10) ? ":0" : ":") + seconds
        // timeValue += (hours >= 12) ? " P.M." : " A.M."




         if (seconds == 0) {
        window.status = "New minute!";
        document.clock.face.value = "New minute!";
         }
        if (minutes == 0 && seconds == 0) {
        window.status = "New hour!";
        document.clock.face.value = "New hour!";

         }
        if (hours == 0 && minutes == 0 && seconds == 0) {
        window.status = "Midnight!";
        document.clock.face.value = "Midnight!";
         }

       else if (seconds > 0) {
        document.clock.face.value = timeValue + "  " + date + "-" +  month + "-" + year;
        window.status = timeValue + "  The Xact time according to your computer clock!     "  + date + "/" + month + "-" + year;
                       }

        nextXmas = new Date("December 25, 2000")
        nextXmas.setYear(year)
        msPerDay = 24 * 60 * 60 * 1000 ; // Number of milliseconds per day
        daysLeft = (nextXmas.getTime() - now.getTime()) / msPerDay;
        daysLeft = Math.round(daysLeft);
        document.Frame2.Xmas.value =  daysLeft + " days until Christmas Eve!";

        nextXmas = new Date("December 31, 2000")
        nextXmas.setYear(year)
        msPerDay = 24 * 60 * 60 * 1000 ; // Number of milliseconds per day
        daysLeft = (nextXmas.getTime() - now.getTime()) / msPerDay;
        daysLeft = Math.round(daysLeft);
        document.Frame3.NewYear.value = daysLeft + " days until New Years Eve!";

        timerID = setTimeout("showtime()",1000);

        timerRunning = true;
}
window.onload=startclock;
</script>
<TABLE BORDER=4 CELLPADDING=0.5 CELLSPACING=0.5>
<TR><TD>
<form name="clock" onSubmit="0">
<input type="textarea" name="face" size=20 value="Java">
</TD></TR></table>
</form>

<TABLE BORDER=4 CELLPADDING=0.5 CELLSPACING=0.5>
<TR><TD>
<form name="Frame2" onSubmit="0">
<input type="textarea" name="Xmas" size=50 value="Java">
</TD></TR></table>
</form>

<TABLE BORDER=4 CELLPADDING=0.5 CELLSPACING=0.5>
<TR><TD>
<form name="Frame3" onSubmit="0">
<input type="textarea" name="NewYear" size=50 value="Java">
</TD></TR></table>
</form>

Похожие записи:

Введите свой email адрес для того, чтобы подписаться на мой блог:

knopkisoc

Добавить комментарий