Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
1

Таймер, который считает вперед

25.09.2018, 14:51. Просмотров 148. Ответов 13
Метки нет (Все метки)

Добрый день!

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

Условия кода:

Указываем дату. Например: 2018,9,24
С этой даты скрипт сравнивает время сейчас и то значение, что указано изначально и выдает результат:
Прошло 5 дней 3 часа 20 минут 30 секунд

Результат обновляется каждую секунду.
При обновлении страницы не сбрасывается.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.09.2018, 14:51
Ответы с готовыми решениями:

Таймер, который пропадает и появляется другой элемеент
Привет, работяги. Вопрос может вам показать глупым, но кто может подсказать, как сделать таймер...

Скрипт на javascript, который считает цену от доллара
Кто знает как сделать скрипт на javascript, который учитывая текущий курс доллара высчитывает...

Скрипт, который считает период от введенной до текущей даты
люди такой вопрос: вот скрипт он должен работать таким образом,вы вводите любое число,месяц и год и...

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

Навигация Назад-Вперед
У меня есть меню, реализованное в виде дерева, при помощи плагина JQuery treeView, как можно...

13
renat_dmitriev
216 / 206 / 88
Регистрация: 26.08.2016
Сообщений: 681
25.09.2018, 17:02 2
С радостью поможем. Что именно у вас не получается? В чем именно нужна помощь?
0
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
25.09.2018, 17:14  [ТС] 3
Javascript
1
2
3
4
5
6
7
8
<script>
 
d0 = new Date(2018,8,20);
d1 = new Date(2018,9,20);
dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);
document.write('Прошло ' + '<strong>' + Math.round(dt) + '</strong> ' + 'дней');
 
</script>
Хочу автоматизировать, чтобы сравнение было с серверным временем и выдачей результата после сравнения.

Сейчас скрипт просто сравнивает две даты, а я не могу понять как сделать точку отсчета и чтобы каждый день цифра увеличивалась на количество дней, которые прошли.

И еще подсказку от вас как сделать счет с точностью до секунд: 5 дн 4 ч 20 мин 30 сек
0
renat_dmitriev
216 / 206 / 88
Регистрация: 26.08.2016
Сообщений: 681
25.09.2018, 18:05 4
remaine, С сервера посылаете странице текущее серверное время и дату отсчета, например на PHP это будет выглядеть так:

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
$dateStart = '2018-08-20';
$dateCurrent = date('Y-m-d H:i:s');
?>
 
<script>
    var serverDateCurrent = new Date('<?php $dateStart ?>');
    var serverDateStart = new Date('<?php $dateCurrent ?>');
 
    var serverDiff = Math.ceil(serverDateCurrent.getTime() - serverDateStart.getTime());
 
    //Лучше запомнить текущее время чтобы не полагаться на точность setInterval
    var localStart = performance.now();
 
    var countDiff = function() {
 
        var diff = Math.ceil(performance.now() - localStart + serverDiff);
 
        var res = [
            ['дн', 1000 * 60 * 60 * 24],
            ['ч', 1000 * 60 * 60],
            ['мин', 1000 * 60],
            ['сек', 1000],
        ].reduce((res, v) => {
            var part = Math.ceil(diff / v[1]);
            if(part) {
                res += ' ' + part + ' ' + v[0];
                diff = diff % v[1];
            }
 
            return res;
        }, 'Прошло');
 
        document.write(res); //Здесь нужно будет выводить в статичный элемент
    };
 
    setInterval(countDiff, 1000);
 
</script>
1
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
25.09.2018, 18:13  [ТС] 5
Цитата Сообщение от renat_dmitriev Посмотреть сообщение
<?php
$dateStart = '2018-08-20';
$dateCurrent = date('Y-m-d H:i:s');
?>
У меня сайт php не обрабатывает...

портал на sharepoint и я могу только js использовать. Можно выводить серверное время без php?
0
renat_dmitriev
216 / 206 / 88
Регистрация: 26.08.2016
Сообщений: 681
25.09.2018, 18:24 6
remaine, Думаю что нет, потому что js отрабатывает на клиенте, сервер ничего о нем не знает, а по https сервер по умолчанию вроде бы время не передает.

Добавлено через 4 минуты
Хотя возможно есть какой-то сервис, выдающий точное время в нужном часовом поясе. И можно считывать время с него, если у сервера не какое-то суперспецифичное.
0
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
25.09.2018, 18:33  [ТС] 7
renat_dmitriev, Хорошо, понятно...
А если не заморачиваться с серверным временем и просто каждые 24 часа прибавлять единицу?
0
renat_dmitriev
216 / 206 / 88
Регистрация: 26.08.2016
Сообщений: 681
25.09.2018, 18:41 8
remaine, Куда и где прибавлять единицу каждые 24 часа?
0
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
25.09.2018, 18:53  [ТС] 9
renat_dmitriev,
Я на своем примере покажу:

new Date(2018,9,25); - от сегодняшнего дня начинаем бесконечно прибавлять единицу каждые 24 часа.
Наверное, такой отсчет подходит: 1000*60*60*24

И выводим результат в строку document.write('Прошло ' + '<strong>' + Math.round(dt) + '</strong> ' + 'дней');

Я не могу додуматься как отсчитывать эти самые 24 часа.
0
renat_dmitriev
216 / 206 / 88
Регистрация: 26.08.2016
Сообщений: 681
25.09.2018, 18:57 10
remaine, Если ваш скрипт не знает сколько времени на сервере, к чему вы собрались прибавлять единицу? Вам нужно узнать сколько времени на сервере, иначе вся логика теряется.
0
outoftime
║XLR8║
763 / 662 / 212
Регистрация: 25.07.2009
Сообщений: 3,320
Записей в блоге: 5
25.09.2018, 22:20 11
remaine, renat_dmitriev, вы можете описать условие задачи а не её решения? Что должен получить пользователь в итоге, какой функционал?
0
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
26.09.2018, 15:12  [ТС] 12
outoftime Пользователь должен при заходе на страницу видеть сколько дней прошло с такой-то даты.
Например, я установил в скрипте дату 25.09.2018. Пользователь зашел через 5 дней и видит блок, в котором написано:
С 25.09.2018 прошло 5 дней. Зашел пользователь через 2 дня: С 25.09.2018 прошло 7 дней.
Т.е. каждый день прибавляется 1 день к значению. Произошло какое-то событие, в скрипте поменяли дату на 30.09.2018 - пошел отсчет от этой даты таким же способом.

Добавлено через 1 час 51 минуту
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style>
    html,
    body {
      margin: 0;
      padding: 0;
    }
 
    #header {
      text-align: center;
      font-size: 20px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: white;
      border-bottom: 1px solid black;
    }
 
    #content {
      text-align: center;
      top: 25px;
      position: absolute;
      overflow: auto;
      line-height: 25px;
    }
 
  </style>
 
<div id="header">
      <span id="counter1"><strong>16</strong> дней </span>
</div>
<div id="content"></div>
 
<script>
function Counter(initDate, id){
    this.counterDate = new Date(initDate);
    this.countainer = document.getElementById(id);
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
    this.hours = 0, this.minutes = 0, this.seconds = 0;
    this.updateNumOfDays();
    this.updateCounter();
}
 
Counter.prototype.updateNumOfDays=function(){
    var dateNow = new Date();
    var currYear = dateNow.getFullYear();
    if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
        this.numOfDays[1] = 29;
    }
    var self = this;
    setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}
 
Counter.prototype.datePartDiff=function(then, now, MAX){
    var diff = now - then - this.borrowed;
    this.borrowed = 0;
    if ( diff > -1 ) return diff;
    this.borrowed = 1;
    return (MAX + diff);
}
 
Counter.prototype.calculate=function(){
    var futureDate = this.counterDate > new Date()? this.counterDate : new Date();
    var pastDate = this.counterDate == futureDate? new Date() : this.counterDate;
    this.seconds = this.datePartDiff(pastDate.getSeconds(), futureDate.getSeconds(), 60);
    this.minutes = this.datePartDiff(pastDate.getMinutes(), futureDate.getMinutes(), 60);
    this.hours = this.datePartDiff(pastDate.getHours(), futureDate.getHours(), 24);
    this.days = this.datePartDiff(pastDate.getDate(), futureDate.getDate(), this.numOfDays[futureDate.getMonth()]);
    this.months = this.datePartDiff(pastDate.getMonth(), futureDate.getMonth(), 12);
    this.years = this.datePartDiff(pastDate.getFullYear(), futureDate.getFullYear(), 0);
}
 
Counter.prototype.addLeadingZero=function(value){
    return value < 10 ? ("0" + value) : value;
}
 
Counter.prototype.formatTime=function(){
    this.seconds = this.addLeadingZero(this.seconds);
    this.minutes = this.addLeadingZero(this.minutes);
    this.hours = this.addLeadingZero(this.hours);
}
 
Counter.prototype.updateCounter=function(){
    this.calculate();
    this.formatTime();
    this.countainer.innerHTML = "Прошел" + " <strong>" + this.days + "</strong> " + (this.days == 1? "день" : "дня");
    var self = this;
    setTimeout(function(){self.updateCounter();}, 1000);
}
</script>
 
<script type="text/javascript">
  new Counter('September 25, 2018 00:00:00', 'counter1');
  new Counter(((new Date()).getTime()+10000), 'counter2');
</script>
С отсчетом времени я разобрался.
0
outoftime
║XLR8║
763 / 662 / 212
Регистрация: 25.07.2009
Сообщений: 3,320
Записей в блоге: 5
26.09.2018, 18:56 13
Цитата Сообщение от remaine Посмотреть сообщение
Т.е. каждый день прибавляется 1 день к значению.
А если я сделаю тот же функционал ничего не прибавляя? Я же написал, не надо писать как что делать, опишите что именно сделать надо. Вы сами не знаете как это реализовать, но подобными условиями указываете как делать. Ну так сделайте сами, вы ведь знаете как.

remaine, А вообще, не стоит городить костыли. Пользуйтесь готовыми решениями, например date-diff. Тогда весь алгоритм работы: берем текущую дату, отнимаем он неё начальную дату и выводим разницу с интервалом в одну секунду.
1
remaine
0 / 0 / 0
Регистрация: 07.01.2017
Сообщений: 22
27.09.2018, 17:41  [ТС] 14
outoftime, понял, спасибо)
0
27.09.2018, 17:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.09.2018, 17:41

Кнопка назад и вперед
Всем привет, кто знает как сделать обычные кнопки назад и вперед,есть например файлы...

Навигация по галерее кнопками вперед и назад
Здравствуйте. Сделал галерею просмотра картинок на css. Переход (назад / вперед) с href='#pic2 /...

добавить кнопки для перелистывания вперед назад
И опять в очередной раз прошу помощи. Есть каталог в интернет магазине и при подробном виде...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru