Форум

jurvrn · #1 (**permalink**) 06.04.2021, 13:21

Часы показывают время по UTC, а нужно чтобы показывали московское время (UTC +3). Задал по образцу корректировку часового пояса, но часы не показывают время вообще. (сам код - это код шорткода Wordpress, построенный на javascript, поэтому время берется с сервера, а отсчет идет скриптом).

add_shortcode ( 'w_my_shortcode_liveclockserver', 'w_my_shortcode_liveclockserver_func' );
function w_my_shortcode_liveclockserver_func($attr, $content = null)
{
    static $form_num;
    $form_num++;

    $time = getdate();

return <<<HTML
    <style>
        .w_polein {
             min-width: 168px;
             height: 28px;
             line-height: 28px;
             background: #c0de7c;
             padding: 5px;
             border: none;
             font-size: 1.28em;
             font-family: Verdana, sans-serif;
             font-weight: bold;
             text-align: center;
             outline: none;
        }
    </style>

         <form name='lcs_$form_num'><p><i class='fa fa-clock-o fa-lg' aria-hidden='true'></i>  <strong>Точное время: </strong><input type='text' class='w_polein' name='lcs2_$form_num'></p></form>

    <!--suppress JSAnnotator -->
    <script>
    
        document.addEventListener("DOMContentLoaded", function() {
            Date.prototype.setTimezoneOffset = function(minutes) {
                var _minutes;
                if (this.timezoneOffset == _minutes) {
                    _minutes = this.getTimezoneOffset();
                } else {
                    _minutes = this.timezoneOffset;
                }
                if (arguments.length) {
                    this.timezoneOffset = minutes;
                } else {
                    this.timezoneOffset = minutes = this.getTimezoneOffset();
                }
                return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
            };
            
        var second={$time['seconds']};
        second.setTimezoneOffset(-180);
        second = second.getDate();
        var minute={$time['minutes']};
        minute.setTimezoneOffset(-180);
        minute = minute.getDate();
        var hour={$time['hours']};
        hour.setTimezoneOffset(-180);
        hour = hour.getDate();
         
        document.lcs_$form_num.lcs2_$form_num.value='0';

        function display(){
            second++;
            if (second>=60){ second=0; minute++ }
            if (minute>=60){ minute=0; hour++ }
            if (hour>23){ hour=0; minute=0; second=0 }
            var cHour = hour;
            cHour.setTimezoneOffset(-180);
            cHour = cHour.getDate();
            var cMinute = minute;
            cMinute.setTimezoneOffset(-180);
            cMinute = cMinute.getDate();
            var cSecond = second;
            cSecond.setTimezoneOffset(-180);
            cSecond = cSecond.getDate();            
            if (second < 10) cSecond = '0' + second;
            if (minute < 10) cMinute = '0' + minute;
            if (hour < 10) cHour = '0' + hour;
            document.lcs_$form_num.lcs2_$form_num.value=cHour+':'+cMinute+':'+cSecond;
            setTimeout('display()',1000)
        }
         display()
    </script>
HTML;
}

код ещё можно посмотреть здесь - https://jsfiddle.net/jurvrn/jyhdt52f/5/

рони · #2 (**permalink**) 06.04.2021, 13:35

jurvrn,
проверяйте

<!DOCTYPE HTML>

<html>

<head>
  <title></title>
</head>

<body>
<span id="txt"></span>
<script type="text/javascript">

function moscowTime() {
	var d = new Date();
	d.setHours( d.getHours() + 3, d.getMinutes() + d.getTimezoneOffset()  );
    var reg = d.getSeconds()%2;
    var time = d.toTimeString().substring(0,5)
    reg && (time = time.replace(':',' '))
    return time;
}

onload = function () {

  setInterval(function () {
    document.getElementById("txt").innerHTML = moscowTime();
  }, 100);
}
</script>


</body>

</html>

jurvrn · #3 (**permalink**) 06.04.2021, 14:04

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

проверяйте

спасибо! общий смысл оказался что надо прибавить +3 часа к перемененной часов, и не нужно возиться со смещением времени.
А время изначально откуда берется в javascript? в php оно считывается с сервера.

рони · #4 (**permalink**) 06.04.2021, 14:20

jurvrn,
время из компа, если синхронизация не отключена, то комп корректирует время самостоятельно, согласно выбранному поясу, запросом с серверов точного времени.

jurvrn · #5 (**permalink**) 06.04.2021, 14:49

рони,
а если на компьютере время не правильное? Тогда хотелось бы получить сразу нужное число часа с сервера (по МСК, то есть UTC+3)
Но это уже не javascript.
Можно конечно просто прибавить три часа...

var hour={$time['hours']};
var hour = hour + 3;

рони · #6 (**permalink**) 06.04.2021, 14:49

jurvrn,
?

jurvrn · #7 (**permalink**) 06.04.2021, 17:11

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

?

я имел в виду что при использовании функции php

$time = getdate();

время берется с сервера и у нас получается массив, который в моем первом сообщении разбиваем на переменные

var second={$time['seconds']};
var minute={$time['minutes']};
var hour={$time['hours']};

и в скрипте можно было бы просто прибавить к часам + 3.

var hour={$time['hours']};
var hour = hour + 3;

Задавая время через php мы исключаем показ неверного времени, если у пользователя время на компьютере неправильное, не синхронизировано. Потому что время берется с сервера.
Но ваш код мне тоже нравится, есть где использовать, например в мобильной версии.
Но хотелось бы прикрутить к нему функцию из php -

$time = getdate();

То есть вместо

var d = new Date();

использовать в скрипте что-то вроде

<?php
$time = getdate();

<script>
var d = $time;
....

рони · #8 (**permalink**) 06.04.2021, 17:18

jurvrn,
медитировать тут https://javascript.ru/forum/misc/594...tml#post395951

jurvrn · #9 (**permalink**) 06.04.2021, 21:51

рони,
Ваш код в этой теме больше подходит ( часы и минуты с
мигающим двоеточием).
Если есть техническая возможность прикрутить к нему время сервера было бы здорово.

рони · #10 (**permalink**) 06.04.2021, 22:34

jurvrn,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .time{
    color: rgb(102, 255, 255);
     background-color: rgb(0, 0, 255);
     padding: 2px 4px;
     border-radius: 4px;
     display: flex;
     width: 50px;
     justify-content:  space-between;
  }

  .time span{
    margin: 2px;
    font-weight: bold;
    text-align: center;
  }
  .time .sp, .time .spl{
    color: rgb(255, 255, 255);
    font-size: 20px;
  }
  .sec {
    color: rgb(255, 255, 0);
  }
  .time .sp{
      margin: -1px;
  }

  </style>
</head>

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

function fn(f, a) {
    var c = {
        cls: ["hour", "sp", "min"],
        formatTime: function(b) {
            b = Math.floor(b / 1E3);
            var a = Math.floor(b / 60),
                d = Math.floor(a / 60);
            b %= 60;
            a %= 60;
            var t = b % 2 ? ":" : "\u200A";
            return [c.two(d % 24), t, c.two(a)]
        },
        two: function(b) {
            return (9 < b ? "" : "0") + b
        },
        timer: function(b) {
            var a = performance.now();
            requestAnimationFrame(function g(e) {
                e -= a;
                e = c.formatTime(b + e);
                c.cls.forEach(function(a, b) {
                    a.innerHTML = e[b]
                });
                requestAnimationFrame(g)
            })
        },
        init: function() {
            a = a.split(":");
            a = 36E5 * a[0] + 6E4 * a[1] + 1E3 * a[2];
            c.cls = c.cls.map(function(a) {
                var d = document.createElement("span");
                d.classList.add(a);
                f.appendChild(d);
                return d
            });
            c.timer(a)
        }
    };
    c.init()
};


var span = document.querySelector('.time') ;
fn(span, '02:08:41');// fn(span, '%uptime%');
//fn(span, '<?php echo date("G").":".date("i").":".date("s"); ?>');
</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript