Форум

rustik-yes · #1 (**permalink**) 26.04.2014, 12:03

Доброго дня.

Есть такой шуточный скрипт-счетчик "До начала каникул осталось:.........".
Вот как он выглядит в реале - 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;">&nbsp;<b><span id="RemainsFullDays"></span></b>&nbsp;</font> дней, <font style="background-color: #c3cddc; color: #4f5865;">&nbsp;<b><span id="RemainsFullHours"></span></b>&nbsp;</font> часов, <font style="background-color: #c3cddc; color: #4f5865;">&nbsp;<b><span id="RemainsMinutes"></span></b>&nbsp;</font> минут, <font style="background-color: #c3cddc; color: #4f5865;">&nbsp;<b><span id="lastSec"></span></b>&nbsp;</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 сек счетчик должен выдавать надпись: "До конца каникул осталось: ## дней ## часов ## мин ## сек".

Чтобы один раз залив такой скриптик на сайт, я уже не думал о нем. А сейчас я должен каждый раз ловить нужную дату и вручную менять цифры в скрипте.

Помогите исправить скрипт, моих собственных знаний тут недостаточно. Спасибо всем, кто откликнется.

рони · #2 (**permalink**) 27.04.2014, 00:25

rustik-yes,

<!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>

rustik-yes · #3 (**permalink**) 27.04.2014, 10:09

Спасибо, Рони, ты опять меня выручил. Теперь вот так выглядит: http://rybens.ru/script.html

Можно еще пару пожеланий?

1. Нужно, чтобы цифры были обрамлены в синее поле, как на старом варианте, там внутри синий цвет #c3cddc

2. Напишите в комментариях в скрипте, где там можно поменять даты каникул. Вдруг кто-то уйдет на каникулы на пару дней раньше или позже, и мне нужно знать, какие теперь цифры мне менять. Похоже, это цифры "4, 26, 0, 0, 0", но для надежности надо спросить.

В долгу не останусь.

рони · #4 (**permalink**) 27.04.2014, 11:18

rustik-yes,
1. смотрите код выше и если нужно корректируйтее css - строки 8-15
2. да. 4 это пятый месяц май, 26 это 1 день каникул.
строки 47 и 49
8 соотвественно 9 месяц сентябрь, 1 - первый день учёбы
строка 49

rustik-yes · #5 (**permalink**) 27.04.2014, 21:25

Спасибо, Рони, ты гений! Выручил детишек, теперь вовремя пойдут на каникулы!
Пришли мне в личку свой кошелек WMR или Яндекс-денег, окажу посильную помощь.

Feex · #6 (**permalink**) 20.08.2016, 15:02

рони,
Подскажите, пожалуйста, как использовать два таких скрипта на одной странице? Пробовал запустить оба под разные события, работает только один, второй останавливается.

рони · #7 (**permalink**) 20.08.2016, 15:33

Feex,
продублировать строки 19 и 45-54 изменив все show и Time на иное

рони · #8 (**permalink**) 20.08.2016, 15:40

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>

Feex · #9 (**permalink**) 20.08.2016, 15:42

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

Feex,
продублировать строки 19 и 45-54 изменив все show и Time на иное

Есть) получилось. еще в одном скрипте не должен показываться день, там только часы, минуты и сек. Как сделать, чтоб в одном скрипте день не показывался, а во втором показывался?

Feex · #10 (**permalink**) 20.08.2016, 15:44

В общем я покажу оба по отдельности:

<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>

Они немного отличаются - первый Вы делали - он показывает сколько до конца дня осталось.
А второй я переделал "до конца/начала лета" показывает.
После Ваших подсказок оба работают на одной странице, но в первом скрипте показывается еще и кол-во дней. Если он один на странице, то дни не показываются. т.е надо изменить второй скрипт так, что бы он не выводил дни в первом.

Форум

Справочник

Discord чат

Курсы javascript