Форум

Spirit_on · #1 (**permalink**) 27.04.2014, 20:27

Здравствуйте уважаемые знатоки скриптоманы!
Частенько заходил сюда просто как гость,почитать,посмотреть.
Но как говорится нужда приспичила,пришлось региться

.
Если с 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 "заточил".
Заранее спасибо за помощь!

рони · #2 (**permalink**) 27.04.2014, 22:47

Spirit_on,
таймер должен отсчитать до определённого времени или заложенные изначально часы?

Spirit_on · #3 (**permalink**) 27.04.2014, 23:14

Сообщение от рони

Spirit_on,
таймер должен отсчитать до определённого времени или заложенные изначально часы?

Заложенные.
В приведенном коде он от 7ми часов считает,и так бесконечно.Вот еще бы сделать чтобы браузерные куки его запоминали и продолжали отсчет,если даже я через час вкладку открою.
А сейчас все печально сбрасывается на начало,т.е. опять отсчет прет от 7ми часов.
Я себе уже все мозги свихнул,пол инета облазил-но в скриптах полный дилетант.

рони · #4 (**permalink**) 27.04.2014, 23:59

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>

Spirit_on · #5 (**permalink**) 28.04.2014, 03:07

Сообщение от рони

Spirit_on,
время указать в секундах ... для примера поставлено 30сек

Снимаю шляпу,Рони

.
То,что надо.
Но есть некоторые затыки,не пойму на браузер грешить или в коде что-то.?
Проверял в Хроме,Опере,Мазиле
1.Проглатывает цифры (перескакивает напр.с 9ки сразу на 7ку,или с 3ки на 1цу).
2.В Мазиле и Опере по окончании отсчета и новом начале отсчета,в нулях которые стоят в самом начале цифры появляются,и сразу пропадают.
Или с воспроизведением флеша у меня косяки или в коде что-то допилить надо.
Да,Рони у меня в коде на 84ой строке стояла вот такая загогулина //]]> .
В твоем коде ее нет,она нужна вообще?
Да вот ссылка на видео,как таймер у меня косячит..
http://www.youtube.com/watch?v=PXUt7...ature=youtu.be
И можно еще вопрос?
Сколько "живут" эти куки?

рони · #6 (**permalink**) 28.04.2014, 09:23

Spirit_on,
1. и 2. так устроен этот скрипт можно попробовать уменьшить 1000 в строке 79 но и это не решит проблему до конца.
и ещё добавить +1 в строке 45

localStorage.setItem("seconds", JSON.stringify(seconds_left+1));

строки 84 и 9 лишнее
Объект localStorage хранит данные без ограничения по времени
видео посмотреть не смог ))) пароль требует

Spirit_on · #7 (**permalink**) 28.04.2014, 10:18

Сообщение от рони

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й строке?
В Хроме все идеально,а вот с Оперой и Мазилой подтормаживания,про ИЕ вообще молчу,там только нули статикой стоят на месте .
Жаль конечно,что он как то в раскоряк работает,но тебе огромное спасибо все равно-за помощь!

jsnb · #8 (**permalink**) 28.04.2014, 11:13

Сообщение от Spirit_on

Только вариант с уменьшением 1000 сразу отметается,я ставлю 999 и таймер косячить начинает,если секунд мало выставлено-незаметно,а если от 4х дней к примеру,то должно быть так! 03:59:59:59,а он показыв.:04:00:05:23

Вы точно в той строке 1000 меняете?

Spirit_on · #9 (**permalink**) 28.04.2014, 11:29

Сообщение от jsnb

Вы точно в той строке 1000 меняете?

На 44ой строке.
Или надо на 79ой?
Вообще ппц,я нуб-нубом.

jsnb · #10 (**permalink**) 28.04.2014, 11:41

Сообщение от Spirit_on

На 44ой строке.
Или надо на 79ой?
Вообще ппц,я нуб-нубом.

Ну так рони же писал где менять...

Сообщение от рони

можно попробовать уменьшить 1000 в строке 79

Форум

Справочник

Discord чат

Курсы javascript