|
...и снова 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 "заточил". Заранее спасибо за помощь! |
Spirit_on,
таймер должен отсчитать до определённого времени или заложенные изначально часы? |
Цитата:
В приведенном коде он от 7ми часов считает,и так бесконечно.Вот еще бы сделать чтобы браузерные куки его запоминали и продолжали отсчет,если даже я через час вкладку открою. А сейчас все печально сбрасывается на начало,т.е. опять отсчет прет от 7ми часов. Я себе уже все мозги свихнул,пол инета облазил-но в скриптах полный дилетант. |
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>
|
Цитата:
То,что надо. Но есть некоторые затыки,не пойму на браузер грешить или в коде что-то.? Проверял в Хроме,Опере,Мазиле 1.Проглатывает цифры (перескакивает напр.с 9ки сразу на 7ку,или с 3ки на 1цу). 2.В Мазиле и Опере по окончании отсчета и новом начале отсчета,в нулях которые стоят в самом начале цифры появляются,и сразу пропадают. Или с воспроизведением флеша у меня косяки или в коде что-то допилить надо. Да,Рони у меня в коде на 84ой строке стояла вот такая загогулина //]]> . В твоем коде ее нет,она нужна вообще? Да вот ссылка на видео,как таймер у меня косячит.. http://www.youtube.com/watch?v=PXUt7...ature=youtu.be И можно еще вопрос? Сколько "живут" эти куки? |
Spirit_on,
1. и 2. так устроен этот скрипт можно попробовать уменьшить 1000 в строке 79 но и это не решит проблему до конца. и ещё добавить +1 в строке 45
localStorage.setItem("seconds", JSON.stringify(seconds_left+1));
строки 84 и 9 лишнее Объект localStorage хранит данные без ограничения по времени видео посмотреть не смог ))) пароль требует |
Цитата:
Поправил ссылку на видео. Не в той строке поменял. А вот что дает +1 в 45й строке? В Хроме все идеально,а вот с Оперой и Мазилой подтормаживания,про ИЕ вообще молчу,там только нули статикой стоят на месте . Жаль конечно,что он как то в раскоряк работает,но тебе огромное спасибо все равно-за помощь! |
Цитата:
|
Цитата:
Или надо на 79ой? Вообще ппц,я нуб-нубом. |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 01:15. |
|