[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: GaV  
Форум » ВСЁ ДЛЯ WEB МАСТЕРОВ uCoz » Ответы и помощь web - мастерам » Как сделать обратный отсчет?
Как сделать обратный отсчет?
Воскресенье, 30.10.2011, 17:22 | Сообщение # 1
Сообщений:
62
Награды:
Замечания:
IP:
-
3
+
3
Как сделать скрипт обратного отсчета как на этом сайте? Обязательно нужно, что не до дня отсчитывался, а еще и до скольки часов и минут.
Вторник, 01.11.2011, 23:15 | Сообщение # 2
Сообщений:
236
Награды:
Замечания:
IP:
-
15
+
15
V-STYLE, сразу 1000 извенений за то что так долго не отвечал.... (просто были ограничения по интернету и просматривать страницы мог, а писать нет...)

Ну а теперь вот то что Вы просили или искали:

Данный код ставим в любое удобное место:

Code
<script language='javascript' type='text/javascript'>
function fulltime ()   {
var time=new Date();
var newYear=new Date("jan,01,2012,00:00:00");          
var totalRemains=(newYear.getTime()-time.getTime());

if (totalRemains>1){

var RemainsSec = (parseInt(totalRemains/1000));
var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
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("RemainsFullDays").innerHTML=RemainsFullDays+"<span id='Rem'> дн</span>";
document.getElementById("RemainsFullHours").innerHTML=RemainsFullHours+"<span id='Rem'> час</span>";
document.getElementById("RemainsMinutes").innerHTML=RemainsMinutes+"<span id='Rem'> мин</span>";
document.getElementById("lastSec").innerHTML=lastSec+"<span id='Rem'> сек</span>";          
setTimeout('fulltime()',10)           
}

else{
document.getElementById("clock").innerHTML="C НОВЫМ ГОДОМ !!!";
}
}
</script>
<style type='text/css'>
#clou_xs {position:relative;width:200px;height:150px;padding:10px;}
#clock {height:150px;text-align:center;font-size:13px;}
#RemainsFullDays {position:absolute;top:50%;left:40%;font-size:25px;}
#RemainsFullHours {position:absolute;bottom:1px;left:40px;font-size:15px;}
#RemainsMinutes {position:absolute;bottom:1px;left:87px;font-size:15px;}
#lastSec {position:absolute;bottom:1px;left:135px;font-size:15px;}
#Rem {font-size:11px;font-weight:normal;}
</style>
<div id='clou_xs'>
<div id='clock'>
таймер для V-STYLE:

<span id='RemainsFullDays'></span>
           <span id='RemainsFullHours'></span>
           <span id='RemainsMinutes'></span>
           <span id='lastSec'></span>
</div>
</div>
<script language='javascript'>fulltime();</script>


Находим в коде вот эту строку и редактируем в ней дату и время:
Code
var newYear=new Date("jan,01,2012,00:00:00");  


Так же обратите внимание, что месяца прописываются в коде так:
Code
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec




По моему мнению это один из самых удачных скриптов который поддается редактированию и еще много чему, главное терпение...
Среда, 02.11.2011, 00:47 | Сообщение # 3
Сообщений:
62
Награды:
Замечания:
IP:
-
3
+
3
GaV, Все хорошо, только можно, чтобы числа (дней, часов, минут и секунд) были обычного размера, как на примере:
Среда, 02.11.2011, 12:44 | Сообщение # 4
Сообщений:
236
Награды:
Замечания:
IP:
-
15
+
15
V-STYLE, конечно можно...вы и сами можете их отрегулировать каждую в отдельности... вот переделанный мной код :

Code
<script language='javascript' type='text/javascript'>     
function fulltime ()   {     
var time=new Date();     
var newYear=new Date("jan,01,2012,00:00:00");              
var totalRemains=(newYear.getTime()-time.getTime());     

if (totalRemains>1){     

var RemainsSec = (parseInt(totalRemains/1000));     
var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));     
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("RemainsFullDays").innerHTML=RemainsFullDays+"<span id='Rem'> дн</span>";     
document.getElementById("RemainsFullHours").innerHTML=RemainsFullHours+"<span id='Rem'> час</span>";     
document.getElementById("RemainsMinutes").innerHTML=RemainsMinutes+"<span id='Rem'> мин</span>";     
document.getElementById("lastSec").innerHTML=lastSec+"<span id='Rem'> сек</span>";              
setTimeout('fulltime()',10)               
}     

else{     
document.getElementById("clock").innerHTML="C НОВЫМ ГОДОМ !!!";     
}     
}     
</script>     
<style type='text/css'>     
#clou_xs {position:relative;width:200px;height:50px;padding:10px;}     
#clock {height:150px;text-align:center;font-size:13px;}     
#RemainsFullDays {position:absolute;bottom:1px;left:15px;font-size:15px;}
#RemainsFullHours {position:absolute;bottom:1px;left:55px;font-size:15px;}     
#RemainsMinutes {position:absolute;bottom:1px;left:102px;font-size:15px;}     
#lastSec {position:absolute;bottom:1px;left:150px;font-size:15px;}     
#Rem {font-size:11px;font-weight:normal;}     
</style>     
<div id='clou_xs'>     
<div id='clock'>     
таймер для V-STYLE:     

<span id='RemainsFullDays'></span>     
               <span id='RemainsFullHours'></span>     
               <span id='RemainsMinutes'></span>     
               <span id='lastSec'></span>     
</div>     
</div>     
<script language='javascript'>fulltime();</script>


После установки будет выглядеть все вот так:


В данном варианте я изменил вид дней с 25px до 15px + уменьшел промежуток между надписью и счетчиком со 150px до 50px

Обратите внимание что размер чисел регулируется в этой части кода (находится в низу кода):

1 строка _ #clou_xs {position:relative;width:200px;height:50px;padding:10px;}
2 строка _ #clock {height:150px;text-align:center;font-size:13px;}
3 строка _ #RemainsFullDays {position:absolute;bottom:1px;left:15px;font-size:15px;}
4 строка _ #RemainsFullHours {position:absolute;bottom:1px;left:55px;font-size:15px;}
5 строка _ #RemainsMinutes {position:absolute;bottom:1px;left:102px;font-size:15px;}
6 строка _ #lastSec {position:absolute;bottom:1px;left:150px;font-size:15px;}
7 строка _ #Rem {font-size:11px;font-weight:normal;}

1 строка отвечает за вид (это промежуток между надписью и счетчиком и тд.)
2 строка овечает за вид надписи в данно случае это "таймер для V-STYLE:"

3 строка отвечает за настроку отображения дней
4 строка отвечает за настройку часов
5 строка отвечает за настройку минут
6 строка отвечает за настроку секунд
7 строка отвечает за отображения шрифта


Думаю теперь вы справитесь с настройкой таймера и сами... smile
Среда, 02.11.2011, 14:01 | Сообщение # 5
Сообщений:
62
Награды:
Замечания:
IP:
-
3
+
3
GaV, Большое спасибо smile
Среда, 02.11.2011, 14:06 | Сообщение # 6
Сообщений:
236
Награды:
Замечания:
IP:
-
15
+
15
V-STYLE, пожалуйста... smile
Понедельник, 07.11.2011, 00:17 | Сообщение # 7
Сообщений:
62
Награды:
Замечания:
IP:
-
3
+
3
Эту тему тоже можно закрыть:)
Понедельник, 07.11.2011, 00:22 | Сообщение # 8
Сообщений:
236
Награды:
Замечания:
IP:
-
15
+
15
V-STYLE, Ок!

Тема закрыта!
Форум » ВСЁ ДЛЯ WEB МАСТЕРОВ uCoz » Ответы и помощь web - мастерам » Как сделать обратный отсчет?
  • Страница 1 из 1
  • 1
Поиск: