27.04.2014, 20:27
|
 |
Аспирант
|
|
Регистрация: 27.04.2014
Сообщений: 41
|
|
|
...и снова Countdown-->
Здравствуйте уважаемые знатоки скриптоманы!
Частенько заходил сюда просто как гость,почитать,посмотреть.
Но как говорится нужда приспичила,пришлось региться  .
Если с html и css я еще кое-как в состоянии разобраться,то вот Ява-скриптах я полный ахтунг.
К делу:
В нете набрел на сриптик таймера,разобрался как там дату поставить,облагородил его css,но только потом заметил,что он (таймер) не запоминается браузером.При обновлении вкладки отсчет начинается с начала,а хотелось бы,чтобы он продлжался дальше.
Читал я тут у вас,что нужен Set Cookie,но что это и куда...короч труба дело-выручайте!
Вот сам код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Демо</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function getTargetDate(hour_to_count){
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth();
var day = t.getDate();
var hour = t.getHours()+hour_to_count;
return new Date(year, month, day, hour).getTime();
}
$(document).ready(function(){
//Время меняем тут:
var hour_to_count = 7; // отсчет от 7ми часов
// если поставить так: var hour_to_count =2* 24; // отсчет будет от 2х суток
var target_date = getTargetDate(hour_to_count);
// update the tag with id "countdown" every 1 second
setInterval(function () {
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
var d = document.getElementById("day");
var h = document.getElementById("hour");
var m = document.getElementById("minute");
var s = document.getElementById("second");
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
if(current_date >= target_date){
target_date = getTargetDate(hour_to_count);
}
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
if(days < 10){
days = "0" + days;
}
if(hours < 10){
hours = "0" + hours;
}
if(minutes < 10){
minutes = "0" + minutes;
}
if(seconds < 10){
seconds = "0" + seconds;
}
d.innerHTML = days;
h.innerHTML = hours;
m.innerHTML = minutes;
s.innerHTML = seconds;
// format countdown string + set tag value
//countdown.innerHTML = days + "d, " + hours + "h, "
//+ minutes + "m, " + seconds + "s";
}, 1000);
})
});//]]>
</script>
</head>
<body>
<div id="countdown">
<span id="day" >00</span>
<span id="hour" >00</span>
<span id="minute" >00</span>
<span id="second" >00</span>
</div>
</body>
</html>
P.S
Не пинайте сразу,но хотелось бы именно с этим кодом разобраться,я под него уже css "заточил".
Заранее спасибо за помощь!
|
|
27.04.2014, 22:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Spirit_on,
таймер должен отсчитать до определённого времени или заложенные изначально часы?
|
|
27.04.2014, 23:14
|
|
Аспирант
|
|
Регистрация: 27.04.2014
Сообщений: 41
|
|
Сообщение от рони
|
Spirit_on,
таймер должен отсчитать до определённого времени или заложенные изначально часы?
|
Заложенные.
В приведенном коде он от 7ми часов считает,и так бесконечно.Вот еще бы сделать чтобы браузерные куки его запоминали и продолжали отсчет,если даже я через час вкладку открою.
А сейчас все печально сбрасывается на начало,т.е. опять отсчет прет от 7ми часов.
Я себе уже все мозги свихнул,пол инета облазил-но в скриптах полный дилетант. |
|
27.04.2014, 23:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Spirit_on,
время указать в секундах ... для примера поставлено 30сек
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Демо</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<style type='text/css'>
</style>
<script>
$(window).load(function(){
function getTargetDate(Milliseconds_to_count){
var t = new Date();
t.setMilliseconds(t.getMilliseconds()+Milliseconds_to_count)
return t.getTime();
}
//Время меняем тут:
var Milliseconds_to_count = 30 * 1000; // отсчет в секундах - 7 часов = 7 * 60 * 60 * 1000
var time = 200
var target_date = getTargetDate(JSON.parse(localStorage.getItem("Milliseconds"))|| Milliseconds_to_count);
// update the tag with id "countdown" every 1 second
var timer = function () {
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
var d = document.getElementById("day");
var h = document.getElementById("hour");
var m = document.getElementById("minute");
var s = document.getElementById("second");
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date);
localStorage.setItem("Milliseconds", JSON.stringify(seconds_left));
if(seconds_left < 1000){
target_date = getTargetDate(Milliseconds_to_count);
time = 1000;
}
seconds_left /= 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
if(days < 10){
days = "0" + days;
}
if(hours < 10){
hours = "0" + hours;
}
if(minutes < 10){
minutes = "0" + minutes;
}
if(seconds < 10){
seconds = "0" + seconds;
}
d.innerHTML = days;
h.innerHTML = hours;
m.innerHTML = minutes;
s.innerHTML = seconds;
window.setTimeout(timer, time)
};
timer()
});
</script>
</head>
<body>
<div id="countdown">
<span id="day" >00</span>
<span id="hour" >00</span>
<span id="minute" >00</span>
<span id="second" >00</span>
</div>
</body>
</html>
Последний раз редактировалось рони, 03.05.2014 в 17:19.
|
|
28.04.2014, 03:07
|
|
Аспирант
|
|
Регистрация: 27.04.2014
Сообщений: 41
|
|
|
Сообщение от рони
|
Spirit_on,
время указать в секундах ... для примера поставлено 30сек
|
Снимаю шляпу,Рони  .
То,что надо.
Но есть некоторые затыки,не пойму на браузер грешить или в коде что-то.?
Проверял в Хроме,Опере,Мазиле
1.Проглатывает цифры (перескакивает напр.с 9ки сразу на 7ку,или с 3ки на 1цу).
2.В Мазиле и Опере по окончании отсчета и новом начале отсчета,в нулях которые стоят в самом начале цифры появляются,и сразу пропадают.
Или с воспроизведением флеша у меня косяки или в коде что-то допилить надо.
Да,Рони у меня в коде на 84ой строке стояла вот такая загогулина //]]> .
В твоем коде ее нет,она нужна вообще?
Да вот ссылка на видео,как таймер у меня косячит..
http://www.youtube.com/watch?v=PXUt7...ature=youtu.be
И можно еще вопрос?
Сколько "живут" эти куки?
Последний раз редактировалось Spirit_on, 28.04.2014 в 04:23.
|
|
28.04.2014, 09:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Spirit_on,
1. и 2. так устроен этот скрипт можно попробовать уменьшить 1000 в строке 79 но и это не решит проблему до конца.
и ещё добавить +1 в строке 45
localStorage.setItem("seconds", JSON.stringify(seconds_left+1));
строки 84 и 9 лишнее
Объект localStorage хранит данные без ограничения по времени
видео посмотреть не смог ))) пароль требует
|
|
28.04.2014, 10:18
|
|
Аспирант
|
|
Регистрация: 27.04.2014
Сообщений: 41
|
|
|
Сообщение от рони
|
Spirit_on,
1. и 2. так устроен этот скрипт можно попробовать уменьшить 1000 в строке 79 но и это не решит проблему до конца.
и ещё добавить +1 в строке 45
localStorage.setItem("seconds", JSON.stringify(seconds_left+1));
строки 84 и 9 лишнее
Объект localStorage хранит данные без ограничения по времени
видео посмотреть не смог ))) пароль требует
|
Спасибо Рони за наводки!
Поправил ссылку на видео.
Только вариант с уменьшением 1000 сразу отметается,я ставлю 999 и таймер косячить начинает,если секунд мало выставлено-незаметно,а если от 4х дней к примеру,то должно быть так! 03:59:59:59,а он показыв.:04:00:05:23
Не в той строке поменял.
А вот что дает +1 в 45й строке?
В Хроме все идеально,а вот с Оперой и Мазилой подтормаживания,про ИЕ вообще молчу,там только нули статикой стоят на месте .
Жаль конечно,что он как то в раскоряк работает,но тебе огромное спасибо все равно-за помощь!
Последний раз редактировалось Spirit_on, 28.04.2014 в 12:15.
|
|
28.04.2014, 11:13
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
|
Сообщение от Spirit_on
|
|
Только вариант с уменьшением 1000 сразу отметается,я ставлю 999 и таймер косячить начинает,если секунд мало выставлено-незаметно,а если от 4х дней к примеру,то должно быть так! 03:59:59:59,а он показыв.:04:00:05:23
|
Вы точно в той строке 1000 меняете?
Последний раз редактировалось jsnb, 28.04.2014 в 11:26.
|
|
28.04.2014, 11:29
|
|
Аспирант
|
|
Регистрация: 27.04.2014
Сообщений: 41
|
|
|
Сообщение от jsnb
|
|
Вы точно в той строке 1000 меняете?
|
На 44ой строке.
Или надо на 79ой?
Вообще ппц,я нуб-нубом.
Последний раз редактировалось Spirit_on, 28.04.2014 в 11:32.
|
|
28.04.2014, 11:41
|
|
Профессор
|
|
Регистрация: 15.03.2014
Сообщений: 561
|
|
|
Сообщение от Spirit_on
|
На 44ой строке.
Или надо на 79ой?
Вообще ппц,я нуб-нубом.
|
Ну так рони же писал где менять...
|
Сообщение от рони
|
|
можно попробовать уменьшить 1000 в строке 79
|
|
|
|
|
