| рони | 08.05.2014 01:45 |
Spirit_on,
Кодировать в UTF-8 без BOM -- а у вас просто UTF-8
Кодировать в UTF-8 без BOM -- а у вас просто UTF-8
...и снова 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ой? Вообще ппц,я нуб-нубом. |
Цитата:
Цитата:
|
Цитата:
Пока "полет" вроде нормальный. |
Рони ,не посмотришь как время будет?
Есть код,все работает,все зациклено,но не знаю как туда css привязать. CSS там внизу есть,но с его помощью только весь массив регулируется. 1.Можно ли сделать чтобы число дней было 2х значное (сейчас 1о значное)? 2.Как привязать css к каждой цифре(каждому нулю) и к каждой точке между цифрами.? Стили не надо прописывать,я это сам сделаю,мне бы сделать,чтоб я зацепиться смог за код. От ранее обсуждаемого счетчика все таки пришлось отказаться-глотает цифры,печально. Вот код: http://jsfiddle.net/B67f4/ |
Цитата:
|
Цитата:
|
Рони,а вот из этого кода,можно как-нибудь хотя бы точки между цифрами убрать и спереди еще 1 ноль (к дням) приделать,если с нулем долго возиться,хотя бы точки поубирать.?
Я пробовал над ними колдовать,но у меня не получилось нифига. |
|
Цитата:
Завидую по доброму,что вот так запросто со скриптами у тебя на ура!! |
Spirit_on,
вот тут волшебный сундучок http://learn.javascript.ru/ :victory: |
Рони,засада! :help:
Последний код не работает на хостинге. Пустая белая страница,а на компе все как положено шевелится и работает. Седня на хост залил и офигел.. Что это может быть? |
Spirit_on,
мне погадать или как ? |
вот
Я тупо код скопировал и залил. |
Spirit_on,
у вас весь текст идёт практически одной строкой как вы так копируите что из 70 строк у вас получилось три ? |
попробуйте скопировать отсюда может больше повезёт.
<html>
<head>
<style type="text/css">
.number{
background: #F54500;
}
</style>
<script type = "text/javascript">
var cday;
var timeInSecs;
var ticker;
function getSeconds() {
var now = new Date();
var nowtime= now.getTime(); // время теперь в миллисекундах
var countdowntime = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); //16 часов = 16:00
//countdowntime - изменяют гд времени, mm, ss к любому времени, требуемому, например, 7,50,0 (0750)
var dy = 5 ; // В пятницу (день 5) - изменяются в течение других дней 0-6
var atime = countdowntime.getTime();
var diff = parseInt((atime - nowtime)/1000); // положительный, если дата находится в будущем
if (diff >0) {
cday = dy - now.getDay();
}
else {
cday = dy - now.getDay() -1;
}
if (cday < 0) { cday += 7; } // провел время обратного отсчета, поэтому пойдите в течение следующей недели
if (diff <= 0) { diff += (24*60*60 ) } // время ковыряем тут (сейчас сутки)
startTimer (diff);
}
function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); //начать встречный показ сразу же
}
function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // прекратите считать в ноле
getSeconds(); // и начните снова и снова!
}
var days = Math.floor(secs/86400);
secs %= 3600; // попробовать поиграть в этой строке (было 86400)
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((days < 10 ) ? "0":"" )+days+' ';
result += ((hours < 10 ) ? "0":"" ) + hours + " " + ( (mins < 10) ? "0" : "" ) + mins
+ " " + ( (secs < 10) ? "0":"" ) + secs + "";
document.getElementById("countdown").innerHTML = result.replace(/(\d+)/g, "<span class='number'>$1</span>");
}
</script>
</head>
<body onload = "getSeconds()" style="background-color: #ffffff;">
<div id="CountD" style="background-color: #ffffff; width:300px; height: 180px; background-image:url(ScreenShot002.png) ">
<span id="title" style="font-family: arial; font-size: 20; font-weight: bold; color: #ffffff; position: relative; top:27px; left:60px; z-index:1;">Weekend Cup 2012</span>
<br><br>
<span id="countdown" style="font-family: arial; font-size: 25; font-weight: bold; color: #3b3b3b; position: relative; top:34px; left:127px; z-index:1;"> </span>
</div>
</body>
</html>
|
Цитата:
Ща попробую-обязательно отпишусь. |
Цитата:
Хотя 1й код,кот мы обсуждали в начале на этом же хосте-все работает. А вот этот ни в какую. |
Spirit_on,
Кодировать в UTF-8 без BOM -- а у вас просто UTF-8 |
Неа-бесполезно.И кодировал и преобразовывал без бом и прост в utf-8.
Все тоже самое.Во капец какой закрался. |
Spirit_on,
может к php? |
Цитата:
Я на всякий уже расширение менял на php. Все также-без изменений. |
Рони,никаких мыслей не появилось?
----> |
Spirit_on,
проблемы не со скриптами -- вам нужен специалист либо по php либо по тем программам которые вы используите |
Цитата:
Если можно чуть подробней,чтоб представлять где копать? |
Spirit_on,
сервер значит у вас сам по себе работает и нужную информацию сам для себя вставляет :-/ |
Цитата:
p.s. Решил трабл,пришлось в скрипте поубирать комментирования после двойного слеша // на русском языке ---------------------------------------- Еше раз сорри за беспокойство. |
| Часовой пояс GMT +3, время: 07:49. |