Доброе время суток!!!
Вот Вам реализация обратного отсчета времени!!!
1. JS (+ добавить 2-ой jquery-1.7.1.min.js)
<script type="text/javascript">
var current="<div class='prices'>Ура мы стартовали</div>";
var year=2013;
var month=9;
var day=21;
var hour=15;
var minute=00;
var tz=+4;
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {
todayy+=1900; }
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('countwar').innerHTML=current;
document.getElementById('countwar').style.display="inline";
document.getElementById('countwar').style.width="300px";
document.getElementById('dday').style.display="none";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('days').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
return;
}
else {
document.getElementById('countwar').style.display="none";
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}
countdown(year,month,day,hour,minute);
</script>
CSS (настроите на свой вкус)
.numbers, .numbers-days, .numbers-hours, .numbers-minutes, .numbers-seconds {border-style: none; padding: 0px; width: 62px; height: 42px; text-align: center; font-family: Arial; font-size: 34px; font-weight: normal; color: #FFFFFF;}
.titlewar, .titlewar-days, .titlewar-hours, .titlewar-minutes, .titlewar-seconds {border: none; padding: 0; margin: 0px 3px; width: 62px; text-align: center; font-family: Arial; font-size: 14px; font-weight: normal; color: #808080;}
#form {width: 300px; height: 80px; position:relative; margin-left:15px;}
.numbers-days {position: absolute; left: 10px; top: 21px; background:#006699;}
.numbers-hours {position: absolute; left: 80px; top: 21px; background:#FF9900;}
.numbers-minutes {position: absolute; left: 150px; top: 21px; background:#FF9900;}
.numbers-seconds {position: absolute; left: 220px; top: 21px; background:#FF9900;}
.titlewar-days {position: absolute; left: 6px; top: 70px;}
.titlewar-hours {position: absolute; left: 76px; top: 70px;}
.titlewar-minutes {position: absolute; left: 147px; top: 70px;}
.titlewar-seconds {position: absolute; left: 217px; top: 70px;}
Вставка в HTML
<div id="form">
<div class="numbers" id="countwar"></div>
<div class="numbers-days" id="dday"></div>
<div class="numbers-hours" id="dhour"></div>
<div class="numbers-minutes" id="dmin"></div>
<div class="numbers-seconds" id="dsec"></div>
<div class="titlewar-days" id="days">Дни</div>
<div class="titlewar-hours" id="hours">Часы</div>
<div class="titlewar-minutes" id="minutes">Минуты</div>
<div class="titlewar-seconds" id="seconds">Секунды</div>
</div>
Как установить дату
В JS правим следующее
var year=2013;
var month=9;
var day=21;
var hour=15;
var minute=00;
var tz=+4;
Внимание!!! если обратите внимание на последнюю строчку (tz=+4) таймзона для МСК... на сайте (http://www.timezone.ru/) найдите свой город и выставите свою таймзону... Надеюсь всем понятно для чего эта фишка))) чтоб часики тикали у всех одинаково)))
Пример реализации = http://pro100max.ru/timer/timer.html
Надеюсь никого не утомил)))) Удачи...