JSFiddle - React, Tailwind, and code Playground

by jurvrn

HTML

<?php
    static $form_num;
    $form_num++;
    $time = getdate();
?>

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

CSS

.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;
  }

JavaScript

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