Шуточный скрипт "До начала каникул осталось..."
Доброго дня.
Есть такой шуточный скрипт-счетчик "До начала каникул осталось:.........". Вот как он выглядит в реале - http://rybens.ru/script.html <SCRIPT language="JavaScript" type="text/javascript">
function fulltime () {
var time=new Date();
var newYear=new Date("may,25,2014,23:59:59");
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;
document.getElementById("RemainsFullHours").innerHTML=RemainsFullHours;
document.getElementById("RemainsMinutes").innerHTML=RemainsMinutes;
document.getElementById("lastSec").innerHTML=lastSec;
setTimeout('fulltime()',10)
}
else{
document.getElementById("clock").innerHTML=" ";
}
}
</SCRIPT>
<script language="JavaScript">
document.write ('<span id="clock">До начала каникул осталось: <font style="background-color: #c3cddc; color: #4f5865;"> <b><span id="RemainsFullDays"></span></b> </font> дней, <font style="background-color: #c3cddc; color: #4f5865;"> <b><span id="RemainsFullHours"></span></b> </font> часов, <font style="background-color: #c3cddc; color: #4f5865;"> <b><span id="RemainsMinutes"></span></b> </font> минут, <font style="background-color: #c3cddc; color: #4f5865;"> <b><span id="lastSec"></span></b> </font> секунд! </span> ');
fulltime();
</script>
Этот скрипт ведет обратный отсчет времени до какой-то даты, в нашем случае до 25 мая. Когда наступает 25 мая 23 часа 59 мин 59 сек, то этот счетчик просто исчезает, все изчезает. Мне нужно немного переделать его - чтобы при достижении указанной даты счетчик не изчезал, а немного менялся, типа так: "До конца каникул осталось: 92 дня, 23 часа, 18 мин, 34 сек". Этот счет идет до 1 сентября (любого года), а 1 сентября в 00 часов 00 мин 00 сек, он должен опять перейти на первоначальный счет "До начала каникул осталось: ....... " Т.е. в итоге должен получиться циклический счетчик, не зависящий от года. В период с 1 сентября 00:00:00 сек до 25 мая 23:59:59 сек счетчик должен выдавать надпись: "До начала каникул осталось: ## дней ## часов ## мин ## сек". В период с 26 мая 00:00:00 сек до 31 августа 23:59:59 сек счетчик должен выдавать надпись: "До конца каникул осталось: ## дней ## часов ## мин ## сек". Чтобы один раз залив такой скриптик на сайт, я уже не думал о нем. А сейчас я должен каждый раз ловить нужную дату и вручную менять цифры в скрипте. Помогите исправить скрипт, моих собственных знаний тут недостаточно. Спасибо всем, кто откликнется. |
До начала каникул осталось
rustik-yes,
:cray: <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.number{
background-color: #c3cddc;
color: #4f5865;
font-weight: bold;
padding: 1px 2px;
}
</style>
</head>
<body>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return "<span class='number'>" + d + "</span> " + days(d) + " <span class='number'>" + two(c) + "</span> " + hours(c) + " <span class='number'>" + two(b) + "</span> " + minutes(b) + " <span class='number'>" + two(a) + "</span> " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var days = plural('день', 'дня', 'дней'),
hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('секунда', 'секунды', 'секунд');
function Time() {
var a = new Date,
b = new Date(a.getFullYear(), 4, 26, 0, 0, 0),
d = "начала";
a.getTime() > b.getTime() && (b = new Date(a.getFullYear(), 8, 1, 0, 0, 0), b.getTime() > a.getTime() ? d = "конца" : b = new Date(a.getFullYear() + 1, 4, 26, 0, 0, 0));
a = b.getTime() - a.getTime();
document.getElementById("show").innerHTML = "До " + d + " каникул осталось: " + formatTime(a);
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>
|
Спасибо, Рони, ты опять меня выручил. Теперь вот так выглядит: http://rybens.ru/script.html
Можно еще пару пожеланий? :) 1. Нужно, чтобы цифры были обрамлены в синее поле, как на старом варианте, там внутри синий цвет #c3cddc 2. Напишите в комментариях в скрипте, где там можно поменять даты каникул. Вдруг кто-то уйдет на каникулы на пару дней раньше или позже, и мне нужно знать, какие теперь цифры мне менять. Похоже, это цифры "4, 26, 0, 0, 0", но для надежности надо спросить. В долгу не останусь. |
rustik-yes,
1. смотрите код выше и если нужно корректируйтее css - строки 8-15 2. да. 4 это пятый месяц май, 26 это 1 день каникул. строки 47 и 49 8 соотвественно 9 месяц сентябрь, 1 - первый день учёбы строка 49 |
Спасибо, Рони, ты гений! Выручил детишек, теперь вовремя пойдут на каникулы!
Пришли мне в личку свой кошелек WMR или Яндекс-денег, окажу посильную помощь. |
рони,
Подскажите, пожалуйста, как использовать два таких скрипта на одной странице? Пробовал запустить оба под разные события, работает только один, второй останавливается. |
Feex,
продублировать строки 19 и 45-54 изменив все show и Time на иное |
Feex,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.number{
background-color: #c3cddc;
color: #4f5865;
font-weight: bold;
padding: 1px 2px;
}
</style>
</head>
<body>
<div id = 'show'></div>
<div id = 'show2'></div>
<script type="text/javascript">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return "<span class='number'>" + d + "</span> " + days(d) + " <span class='number'>" + two(c) + "</span> " + hours(c) + " <span class='number'>" + two(b) + "</span> " + minutes(b) + " <span class='number'>" + two(a) + "</span> " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var days = plural('день', 'дня', 'дней'),
hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('секунда', 'секунды', 'секунд');
function Time() {
var a = new Date,
b = new Date(a.getFullYear(), 4, 26, 0, 0, 0),
d = "начала";
a.getTime() > b.getTime() && (b = new Date(a.getFullYear(), 8, 1, 0, 0, 0), b.getTime() > a.getTime() ? d = "конца" : b = new Date(a.getFullYear() + 1, 4, 26, 0, 0, 0));
a = b.getTime() - a.getTime();
document.getElementById("show").innerHTML = "До " + d + " каникул осталось: " + formatTime(a);
window.setTimeout(Time, 1E3)
};
Time()
function tm() {
var a = new Date,
b = new Date(a.getFullYear(), 4, 26, 0, 0, 0),//начало каникул в этом году
d = "начала";
//окончание каникул в этом году или начало каникул в следующем году
a.getTime() > b.getTime() && (b = new Date(a.getFullYear(), 8, 1, 0, 0, 0), b.getTime() > a.getTime() ? d = "конца" : b = new Date(a.getFullYear() + 1, 4, 26, 0, 0, 0));
a = b.getTime() - a.getTime();
document.getElementById("show2").innerHTML = "До " + d + " каникул осталось: " + formatTime(a);
window.setTimeout(tm, 1E3)
};
tm()
</script>
</body>
</html>
|
Цитата:
|
В общем я покажу оба по отдельности:
<div id = 'show'></div>
<script type="text/javascript" ">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return two(c) + " " + hours(c) + " " + two(b) + " " + minutes(b) + " " + two(a) + " " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('сек.', 'сек.', 'сек.');
function Time() {
var data = Date.parse('01/01/2016') // дата начала 1 шестидневки строго "месяц/день/год"
data = new Date(data);
data.setMinutes((-120 - data.getTimezoneOffset()), 0, 0); //для коррекции запустить в зоне акции alert((new Date).getTimezoneOffset()) и поменять число
for (; (new Date).getTime() > data; ) {
data.setDate(data.getDate()+1)//через сутки +1 , через 6 дней +6
}
var a = data.getTime() - (new Date).getTime();
var pos = ((86400000-a)/86400000*10000|0)/100;
//document.getElementById('bar').style.width= pos +'%';
//document.getElementById("bar").innerHTML = pos +'%'
document.getElementById("show").innerHTML = "До конца дня осталось: " + formatTime(a) + " <br>";
window.setTimeout(Time, 1E3)
};
Time()
</script>
и второй: <div id = 'leto'></div>
<script type="text/javascript" >
function one(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return "<span class='number'>" + d + "</span> " + days(d) + " <span class='number'>" + one(c) + "</span> " + hours(c) + " <span class='number'>" + one(b) + "</span> " + minutes(b) + " <span class='number'>" + one(a) + "</span> " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var days = plural('день', 'дня', 'дней'),
hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('сек.', 'сек.', 'сек.');
function Time1() {
var a = new Date,
b = new Date(a.getFullYear(), 5, 1, 0, 0, 0),
d = "начала";
a.getTime() > b.getTime() && (b = new Date(a.getFullYear(), 8, 1, 0, 0, 0), b.getTime() > a.getTime() ? d = "конца" : b = new Date(a.getFullYear() + 1, 5, 1, 0, 0, 0));
a = b.getTime() - a.getTime();
document.getElementById("leto").innerHTML = "До " + d + " лета осталось: " + formatTime(a);
window.setTimeout(Time1, 1E3)
};
Time1()
</script>
Они немного отличаются - первый Вы делали - он показывает сколько до конца дня осталось. А второй я переделал "до конца/начала лета" показывает. После Ваших подсказок оба работают на одной странице, но в первом скрипте показывается еще и кол-во дней. Если он один на странице, то дни не показываются. т.е надо изменить второй скрипт так, что бы он не выводил дни в первом. |
| Часовой пояс GMT +3, время: 09:41. |