时间戳

首页 > 解决方案 > Javascript HTML 多时区时钟

javascript - Javascript HTML 多时区时钟

问题描述

我如何将我的 checkTime 和 checkMinute 函数合二为一，这样当我执行 (m + 30) 的偏移量时，当 m 达到 60 时，它也会使 h 进入下一个小时。谢谢！

目前我的代码告诉时间并且可以在 24 小时范围内偏移数小时，我的问题是它不允许我更改我希望能够执行的 + 30 分钟偏移量的代码。

我的 if 语句没有让我得到我想要的结果，即当分钟从 + 30 的偏移量中达到 60 时，小时将转到下一个，而不是只影响分钟。

我相信我需要将这两个功能结合在一起，但不确定如何准确地做到这一点。

function addLeadingZero(n) {
  return n < 10 ? '0' + n : n;
}

function timeClock(timeZoneOffset) {
  var d = new Date();
  d.setHours(d.getUTCHours() + timeZoneOffset); // set time zone offset
  var h = d.getUTCHours();
  var m = d.getUTCMinutes();
  var s = d.getUTCSeconds();
  /*    h = h % 12;
      h = h ? h : 12; // replace '0' w/ '12'  */
  /*  h = checkHour(h)  */
  m = checkTime(m);
  s = checkTime(s);
  h = addLeadingZero(h);

  document.all["txt3"].innerHTML = /*+ checkHour*/ (h - 4) + ':' + m + ':' + s + ' ';
  document.all["txt1"].innerHTML = /*+ checkHour*/ (h + 3) + ':' + m + '' + ' ';
  document.all["txt2"].innerHTML = h + ':' + checkMinute(m + 30) + '' + ' ';
  document.all["txt4"].innerHTML = h + ':' + m + '' + ' ';
  document.all["txt5"].innerHTML = h + ':' + m + '' + ' ';
  setTimeout(function() {
    timeClock(timeZoneOffset)
  }, 500);
}

function checkTime(i) {
  var j = i;
  if (i < 10) {
    j = "0" + i;
  }
  return j;
}

function checkHour(i) {
  var j = i;
  if (i > 23) {
    j = j - 24;
  }
  if (i < 0) {
    j = "0" + i;
  }
  return j;
}

function checkMinute(i) {
  var j = i;
  if (i > 59) {
    j = j - 60;
  }
  if (i < 0) {
    j = "0" + i;
  }
  return j;
}

/* setInterval(function() {
      startTime();
      }, 500);
    })(jQuery);    */

window.onload = function() {
  timeClock(2);
}
<div id="txt3"></div>
<div id="txt1"></div>
<div id="txt2"></div>
<div id="txt4"></div>
<div id="txt5"></div>

标签： javascripthtmlcsstimezoneclock

解决方案

准确地说：欢迎来到 2020 年；）

信息：- TZ 列表-> https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

--日期.toLocaleString 用法 -> https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString

[编辑] 添加军用时间（没有秒和:分隔符）

民事和军事时代的第一个版本

const OptionsCivil    = { hour12:true,  hour:'numeric', minute:'2-digit', second:'2-digit' };  
const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit' };

const CivilTime=(dt,dz)=>dt.toLocaleString("en-GB", {...OptionsCivil, timeZone:dz })

const MilitaryTime=(dt,dz)=>
  {
  let rep = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:dz }).replace(/:/g,'')
  return (rep==='0000') ? 2400 : rep.replace(/^24/, '00'); // specific browsers marmelade
  }

setInterval(() => {
  let d = new Date();
  document.querySelectorAll('.timZon')
            .forEach(el=> el.textContent = CivilTime(d, el.dataset.timeZone));
  document.querySelectorAll('.timZonM')
            .forEach(el=> el.textContent = MilitaryTime(d, el.dataset.timeZone));
}, 1000);

/* or more concise :
setInterval(() => {
  let d = new Date();
  document.querySelectorAll('.timZon, .timZonM')
           .forEach(el=>el.textContent =(el.classList.contains('timZonM')?MilitaryTime:CivilTime)(d, el.dataset.timeZone));
}, 1000);
*/
div.timZon,
div.timZonM {
  width       : 7em;
  text-align  : right;
  margin      : .4em;
  color       : deeppink;
  font-family : 'Courier New', Courier, monospace;
}
div.timZonM { /* military time */
  width  : 3em;
  color  : navy;
}

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }
<div class="timZon"  data-time-zone="America/New_York" ></div>
<div class="timZonM" data-time-zone="America/New_York" ></div>
<div class="timZonM" data-time-zone="Asia/Kolkata"></div>
<div class="timZonM" data-time-zone="Europe/Paris"></div>
<div class="timZonM" data-time-zone="Australia/Adelaide"></div>
<div class="timZonM" data-time-zone="Etc/GMT"></div>
<div class="timZonM" data-time-zone="Etc/GMT+4"></div>
<div class="timZonM" data-time-zone="Etc/GMT-5"></div>

在最后评论之后这里是一个只有军事时间的版本，列表中的第一个是唯一一个指示秒的 

const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' };

const MilitaryTime=(elm, dt)=>
  {
  let [hh,mm,ss] = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:elm.dataset.timeZone }).split(':') 
  if ('seconds'in elm.dataset) elm.dataset.seconds = ':'+ss
  elm.textContent = (hh=='00'&&mm=='00') ? '2400' : (hh+mm).replace(/^24/, '00'); // specific browsers marmelade
  }

setInterval(() => {
  let dateTime = new Date();
  document.querySelectorAll('.timZonM').forEach(el=>MilitaryTime(el, dateTime));
}, 1000);
div.timZonM { /* military time */
  width          : 3em;
  margin         : .3em;
  color          : navy;
  font-size      : 20px;
  font-family    : 'Courier New', Courier, monospace;
  letter-spacing : .05em;
  }
div.timZonM::after {
  content : attr(data-seconds);
  color   : crimson;
  }

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }
<div class="timZonM" data-time-zone="America/New_York"></div>
<div class="timZonM" data-time-zone="Asia/Kolkata"></div>
<div class="timZonM" data-time-zone="Europe/Paris" data-seconds></div> <!-- add data-seconds to show seconds value -->
<!-- as much as you want... -->
<div class="timZonM" data-time-zone="Australia/Adelaide"></div>
<div class="timZonM" data-time-zone="Asia/Kathmandu"></div>
<div class="timZonM" data-time-zone="Etc/GMT"></div>
<div class="timZonM" data-time-zone="Etc/GMT+4" data-seconds></div>
<div class="timZonM" data-time-zone="Etc/GMT-5"></div>

对于水平显示，使用 css flex box

const OptionsMilitary = { hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit' }
  ,   timZonMil_All   = document.querySelectorAll('div.timZonMil > div')
  ;
const MilitaryTime=(elm, dt)=>
  {
  let [hh,mm,ss] = dt.toLocaleString("en-US", {...OptionsMilitary, timeZone:elm.dataset.timeZone }).split(':')
  elm.textContent = (hh=='00'&&mm=='00') ? '2400' : (hh+mm).replace(/^24/, '00'); // specific browsers marmelade
  if ('seconds' in elm.dataset) elm.innerHTML  += `<span>:${ss}</span>` 
  }
setInterval(() => {
  let dateTime = new Date();
  timZonMil_All.forEach(el=>MilitaryTime(el, dateTime));
}, 500);
div.timZonMil {
  display         : flex;
  justify-content : space-between;
  min-width       : 100vw;
  position        : absolute;
  top             : 123px;
  color           : navy;
  font-size       : 20px;
  font-family     : 'Courier New', Courier, monospace;
  letter-spacing  : .05em;
  }
div.timZonMil > div {
  min-width   : 3.6em;
  text-align  : center;
  }
div.timZonMil > div[data-seconds] {
  min-width   : 5.2em;
  }
div.timZonMil > div > span {
  color       : crimson;
  }

/* css tooltip code for displaying timeZone value
   ----------------> irrelevant part, can be removed) */
div[data-time-zone] {
  cursor    : crosshair;
  position  : relative;
  }
div[data-time-zone]:hover {
  background-color : yellow;
  }
div[data-time-zone]:hover:before {
  position         : absolute;
  font-size        : .8em;
  top              : 1.7em;
  border-radius    : .8em;
  content          : 'TZ: ' attr(data-time-zone);
  background-color : darkblue;
  color            : whitesmoke;
  white-space      : nowrap;
  z-index          : 1000;
  padding          : .4em .6em;
  }
<div class="timZonMil" >
  <div data-time-zone="Asia/Tehran"></div>
  <div data-time-zone="Etc/GMT"    ></div>
  <div data-time-zone="Etc/GMT+4"  data-seconds ></div>
  <div data-time-zone="Etc/GMT-8"  ></div>
  <div data-time-zone="Etc/GMT-14" ></div>
</div>

关于 ypur 最后一条消息，我还更改了第二种显示方法

推荐阅读