Как сделать обратный отсчет?
|
|
|
Воскресенье, 30.10.2011, 17:22 | Сообщение # 1
|
|
Как сделать скрипт обратного отсчета как на этом сайте? Обязательно нужно, что не до дня отсчитывался, а еще и до скольки часов и минут. |
|
|
Вторник, 01.11.2011, 23:15 | Сообщение # 2
|
|
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
|
|
GaV, Все хорошо, только можно, чтобы числа (дней, часов, минут и секунд) были обычного размера, как на примере: |
|
|
Среда, 02.11.2011, 12:44 | Сообщение # 4
|
|
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 строка отвечает за отображения шрифта
Думаю теперь вы справитесь с настройкой таймера и сами...  |
|
|
Среда, 02.11.2011, 14:01 | Сообщение # 5
|
|
GaV, Большое спасибо  |
|
|
Среда, 02.11.2011, 14:06 | Сообщение # 6
|
|
V-STYLE, пожалуйста...  |
|
|
Понедельник, 07.11.2011, 00:17 | Сообщение # 7
|
|
Эту тему тоже можно закрыть:) |
|
|
Понедельник, 07.11.2011, 00:22 | Сообщение # 8
|
|
V-STYLE, Ок!
Тема закрыта! |
|