Форум

tenebrosus · #1 (**permalink**) 06.08.2015, 16:40

Дайте плиз скрипт обратно идущих часов до конца дня.. Время сервера должно туда передаваться.. В один див или спан чтобы записывалось.. Без плагинов.. Что нибудь наподобии -

function startTime()
{
var tm=new Date();
var h=tm.getHours();
var m=tm.getMinutes();
var s=tm.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

Только в обратном направлении и как сюда

new Date();

передать текущее время сервера

tenebrosus · #2 (**permalink**) 18.08.2015, 12:22

Спс, но немного не то(.. Тут 23:00:15..15 секунд проходит- и становится 23:00.. Мне нужны обычные часы, идущие в обратном направлении исходя из времени сервера, без поправки на часовой пояс клиента.. К примеру, на сервере 23:59:57- тогда 00:00:02, 00:00:01, 00:00:00.. Неправильно объяснил изначально, сорри

tenebrosus · #3 (**permalink**) 20.08.2015, 23:01

salexseen · #4 (**permalink**) 21.08.2015, 04:06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Первый таймер</p>
  <div id="time"></div>
  <p>Второй таймер</p>
  <div id="time2"></div>
<script>
var MyTime = (function(){
  function MyTime(){
    this.config = {
      delay: 1000 // Частота обновления таймера
    };
  }
  MyTime.prototype = {
    constructor: MyTime,
    len: function(value){
      value = value + '';
      value = (value.length === 1) ? ('0' + value) : value;
      return value;
    },
    format: function(date){
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      var milliseconds = date.getMilliseconds();

      var h = 23 - hours;
      var m = 59 - minutes;
      var s = 59 - seconds;
      var ms = 999 - milliseconds;

      h = this.len(h);
      m = this.len(m);
      s = this.len(s);

      return { h: h, m: m, s: s, ms: ms };
    },
    setDate: function(time){
      var config = this.config;
      config.serverDate = new Date(+time * 1000);
      config.clientDate = new Date();
    },
    update: function(fn){
      var self = this;
      var config = this.config;
      var delay = config.delay || 1000;

      var clientDate = config.clientDate;
      var clientTime = clientDate.getTime();
      var currentTime = new Date().getTime();
      var elapsedTime = currentTime - clientTime;
      var serverDate = config.serverDate;
      var date = new Date(serverDate.getTime() + elapsedTime);

      if (fn && typeof fn === 'function'){
        fn.call(this, date);
        setTimeout(function(){
          self.update(fn);
        }, delay);
      }
    }
  };
  return MyTime;
})();

var t1 = document.getElementById('time'),
    t2 = document.getElementById('time2');

var time = new MyTime(); // Создали таймер
time.config.delay = 1000; // Указали частоту обновления таймера (не обязательно). Если не указать по умолчанию стоит 1000
time.setDate(1440190797); /* Передаём серверное время в unix формате */
time.update(function(date){

  var d = this.format(date);
  var f = d.h + ':' + d.m + ':' + d.s;
  t1.innerHTML = f;

});

/* Можно создать несколько таймеров */
var time2 = new MyTime();
time2.config.delay = 1;
time2.setDate(new Date().getTime() / 1000);
time2.update(function(date){

  var d = this.format(date);
  var f = d.h + ':' + d.m + ':' + d.s + ':' + d.ms;
  t2.innerHTML = f;

});

</script>
</body>
</html>

salexseen · #5 (**permalink**) 21.08.2015, 18:23

Там можно использовать и серверное время, я для примера вставил клиентское время.
Как я бы сделал.
Я бы послала на сервер запрос через ajax, сервер бы мне вернул unix time, и я этот unix time вставил бы в time.setDate(/* здесь будет серверный unix time */).
Примерный код если использовать jQuery

var time = new MyTime()

    $.ajax({
      url: 'main.php', // тут нужно указать ссылку на серверный скрипт, который будет возвращать unix time,
      type: 'POST',
      dataType: 'json',
      data: {
        action: 'getTime'
      },
      success: function(response){
         var t = response.time;
         time.setDate(t);
         time.update(function(date){
           var d = this.format(date);
           console.log(d);
         });
      }
    });

Серверный код

<?php

if ($_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest'){ // Отвечаем только на AJAX запросы

$response = array();
$action = $_POST['action'];

switch($action){
case 'getTime':
$response['time'] = time();
die(json_encode($response));
break;
}

}

рони · #6 (**permalink**) 23.08.2015, 02:21

tenebrosus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .test{
    color: rgb(102, 255, 255);
    background-image: -webkit-gradient(linear, left, right, color-stop(0, #0000CD), color-stop(1, #FF00FF));
    background-image: -o-linear-gradient(left, #0000CD, #FF00FF);
    background-image: -moz-linear-gradient(left, #0000CD, #FF00FF);
    background-image: -webkit-linear-gradient(left, #0000CD, #FF00FF);
    background-image: linear-gradient(to right, #0000CD, #FF00FF)
  }

  .time span{
    margin: 2px;
    font-weight: bold;
  }

  </style>
</head>

<body>
  <span class="time"></span>

<script>

function fn(f) {
    var b = {
        elem: f,
        cls: ["hour", "sp", "min", "spl", "sec"],
        formatTime: function(a) {
            a = Math.floor(a / 1E3);
            var c = Math.floor(a / 60),
                d = Math.floor(c / 60);
            a %= 60;
            c %= 60;
            return [b.two(d % 24), ":", b.two(c), ":", b.two(a)]
        },
        two: function(a) {
            return (9 < a ? "" : "0") + a
        },
        timer: function(a) {
            var c = performance.now();
            requestAnimationFrame(function g(e) {
                e = (e - c) / a.from;
                1 < e && (e = 1);
                b.fullData = b.formatTime(a.from + (-a.from * e | 0));
                1 == e && a.callback && a.callback();
                1 > e && requestAnimationFrame(g)
            })
        }
    };
    b.cls.forEach(function(a, c) {
        var d = document.createElement("span");
        d.classList.add(a);
        f.appendChild(d);
        Object.defineProperty(b, a, {
            get: function() {
                return d.innerHTML
            },
            set: function(a) {
                d.innerHTML = a
            }
        })
    });
    Object.defineProperty(b, "fullData", {
        set: function(a) {
            b.cls.forEach(function(c, d) {
                b[c] = a[d]
            })
        },
        get: function() {
            return b.cls.map(function(a, c) {
                return b[a]
            })
        }
    });
    return b.timer
};
function init(a)
{  a = a.split(':')
   return 24 * 60 * 60 * 1000 - (a[0] * 60 * 60 * 1000 + a[1] * 60 * 1000 + a[2] * 1000)
}

var span = document.querySelector('.time') ;
var timer = fn(span);
timer({
        from : init('23:59:57'),
        callback : function() { span.classList.add('test')}
    })


</script>
</body>
</html>

tenebrosus · #7 (**permalink**) 20.11.2015, 04:47

рони, Спасибооо! Оно!)))

tenebrosus · #8 (**permalink**) 20.11.2015, 05:09

Все работает как надо, только Uncaught TypeError: Cannot read property 'appendChild' of null в консоли

рони · #9 (**permalink**) 20.11.2015, 07:40

tenebrosus,
какой браузер? и ошибка точно от этого скрипта?

tenebrosus · #10 (**permalink**) 23.11.2015, 11:38

Извиняюсь)

Форум

Справочник

Discord чат

Курсы javascript