Как поставить уходящий год на счётчик?

Опубликовано 25.12.2012 | Автор: ОльКа

Ожидание Нового года для кого-то это суета: надо купить всем подарки, придумать меню, решить куда пойти или поехать, с кем встретить Новый год, и в чем его встретить. Для других — это некое ожидание чуда — они верят, что с наступлением Нового года, произойдёт что-нибудь хорошее, волшебное, сбудутся желания или просто подведут итог уходящего года. Так или иначе, чем ближе эта заветная дата, чем меньше листов в отрывном календаре, тем мельче становятся единицы измерения времени. Ну, кто из вас в сентябре отсчитывал время в днях, в часах и тем более секундах?! В то уже далёкое время, когда и сайта этого не было в просторах Интернета, учитывались лишь месяцы и полумесяцы 🙂

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

Первым делом заходим в раздел «Виджеты».
Выбираем виджет «Текст» и мышкой перетаскиваем его в ту область, куда хотим поместить счетчик. (Положение в любое время можно сменить, также перетащив готовый виджет мышью).
В раскрытую форму вставляем html-код:

<style style=»text/css»>.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#22AE25;
font: bold 20px arial;
padding: 15px;

border:2px solid #333333;

border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 5px 5px 5px #CCCCCC;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 120%
}

</style>

<script type=»text/javascript»>

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this
var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit==»hours»){ //if base unit is hours, set «hourfield» to be topmost level
hourfield=dayfield*24+hourfield
dayfield=»n/a»
}
else if (this.baseunit==»minutes»){ //if base unit is minutes, set «minutefield» to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield=»n/a»
}
else if (this.baseunit==»seconds»){ //if base unit is seconds, set «secondfield» to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield=»n/a»
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW///////Hackers001.blogspot.com///////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access «Days» left
//Use arguments[1] to access «Hours» left
//Use arguments[2] to access «Minutes» left
//Use arguments[3] to access «Seconds» left

//The values of these arguments may change depending on the «baseunit» parameter of cdtime.displaycountdown()
//For example, if «baseunit» is set to «hours», arguments[0] becomes meaningless and contains «n/a»
//For example, if «baseunit» is set to «minutes», arguments[0] and arguments[1] become meaningless etc
function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+» days «+arguments[1]+» hours «+arguments[2]+» minutes «+arguments[3]+» seconds left until December 25, 2011 18:25:00″
}
else{ //else if target date/time met
var displaystring=»»
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring=»<span class=’lcdstyle’>»+arguments[0]+» <sup>дней</sup> «+arguments[1]+» <sup>часов</sup> «+arguments[2]+» <sup>минут</sup> «+arguments[3]+» <sup>секунд</sup></span> »
}
else{ //else if target date/time met
var displaystring=»» //Don’t display any text
alert(«HAPPY NEW YEAR EVERYBODY!») //Instead, perform a custom alert
}
return displaystring
}

</script>
<table><tbody>
<tr>
<td>
<img style=»float:left; » src=»http://3.bp.blogspot.com/-id6x2AOCGc4/TvoJfxRT-oI/AAAAAAAAFso/HKKnQ5bcnGY/s400/NEW%2BYEAR.png» width=»125px»/>
<h1 style=»color:#22AE25; padding-top:40px;»> До Нового 2013 года осталось…</h1><br/>
</td></tr>

<tr><td>
<div id=»countdowncontainer»></div>
<br />
<div id=»countdowncontainer2″></div>

<script type=»text/javascript»>

var futuredate=new cdtime(«countdowncontainer», «March 23, 2009 18:25:00»)
futuredate.displaycountdown(«days», formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas’ year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>31)? currentyear+1 : currentyear
var christmas=new cdtime(«countdowncontainer2», «December 31, «+thischristmasyear+» 23:59:59″)
christmas.displaycountdown(«days», formatresults2)

</script>

</td></tr>
</tbody></table>

Нажимаем кнопку «Сохранить».
Переходим на сайт и обновляем страницу (можно кнопкой F5).
Теперь вы можете самостоятельно изменить текст к счетчику. При этом ещё и его цвет и размер. Изменив то, что выделено жирным.