JS世界时钟多条件显示

【问题标题】：JS World clock multiple conditions displayJS世界时钟多条件显示
【发布时间】：2020-11-13 18:37:45
【问题描述】：

我正在运行世界时钟脚本（纽约、伦敦、东京、悉尼）时间。并且在页面上，位置名称旁边会根据市场状态显示一个红/绿点（如果开/关）。
所以，我正在尝试为每个特定位置设置不同的条件，例如：

  • 纽约市场上午 9 点开市，晚上 17 点收盘
  • 伦敦早上 8 点开门，晚上 16 点关门

...在此期间状态显示颜色（柠檬绿），如果关闭此时间则显示状态颜色（红色）...

希望我能清楚地理解，我很想解决这个问题。

function worldClock(zone, region) {
  var dst = 0
  var time = new Date()
  var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)
  var gmtTime = new Date(gmtMS)
  var day = gmtTime.getDate()
  var month = gmtTime.getMonth()
  var year = gmtTime.getYear()
  if (year < 1000) {
    year += 1900
  }
  var monthArray = new Array("Jan", "Fev", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
    "Sep", "Oct", "Nov", "Dec")
  var monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
  if (year % 4 == 0) {
    monthDays = new Array("31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
  }
  if (year % 100 == 0 && year % 400 != 0) {
    monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
  }

  var hr = gmtTime.getHours() + zone
  var min = gmtTime.getMinutes()
  var sec = gmtTime.getSeconds()

  var status = new Array("")

  if (hr >= 24) {
    hr = hr - 24
    day -= -1
  }
  if (hr < 0) {
    hr -= -24
    day -= 1
  }
  if (hr < 10) {
    hr = " " + hr
  }
  if (min < 10) {
    min = "0" + min
  }
  if (sec < 10) {
    sec = "0" + sec
  }
  if (day <= 0) {
    if (month == 0) {
      month = 11
      year -= 1
    } else {
      month = month - 1
    }
    day = monthDays[month]
  }
  if (day > monthDays[month]) {
    day = 1
    if (month == 11) {
      month = 0
      year -= -1
    } else {
      month -= -1
    }
  }
  if (region == "NAmerica") {
    var startDST = new Date()
    var endDST = new Date()
    startDST.setMonth(3)
    startDST.setHours(2)
    startDST.setDate(1)
    var dayDST = startDST.getDay()
    if (dayDST != 0) {
      startDST.setDate(8 - dayDST)
    } else {
      startDST.setDate(1)
    }
    endDST.setMonth(9)
    endDST.setHours(1)
    endDST.setDate(31)
    dayDST = endDST.getDay()
    endDST.setDate(31 - dayDST)
    var currentTime = new Date()
    currentTime.setMonth(month)
    currentTime.setYear(year)
    currentTime.setDate(day)
    currentTime.setHours(hr)
    if (currentTime >= startDST && currentTime < endDST) {
      dst = 1
    }
  }
  if (region == "Europe") {
    var startDST = new Date()
    var endDST = new Date()
    startDST.setMonth(2)
    startDST.setHours(1)
    startDST.setDate(31)
    var dayDST = startDST.getDay()
    startDST.setDate(31 - dayDST)
    endDST.setMonth(9)
    endDST.setHours(0)
    endDST.setDate(31)
    dayDST = endDST.getDay()
    endDST.setDate(31 - dayDST)
    var currentTime = new Date()
    currentTime.setMonth(month)
    currentTime.setYear(year)
    currentTime.setDate(day)
    currentTime.setHours(hr)
    if (currentTime >= startDST && currentTime < endDST) {
      dst = 1
    }

  }

  if (hr >= 9 && hr < 17) {
    status = "limegreen";
  }
  if (time.getDay() == 6 || time.getDay() == 0) {

    status = "red";
  } else {
    status = "red";
  }

  if (dst == 1) {
    hr -= 55 - 1
    if (hr >= 24) {
      hr = hr - 24
      day -= -1
    }
    if (hr < 10) {
      hr = " " + hr
    }

    if (day > monthDays[month]) {
      day = 1
      if (month == 11) {
        month = 0
        year -= -1
      } else {
        month -= -1
      }

    }


    return '<i class="fa fa-circle" style="color: ' + status + ';"></i><br>' + monthArray[month] + " " + day + " " + "<br>" + hr + ":" + min + ":" + sec + " " + "<br>"
  } else {
    return '<i class="fa fa-circle" style="color: ' + status + ';"></i><br>' + monthArray[month] + " " + day + " " + "<br>" + hr + ":" + min + ":" + sec + " " + "<br>"

  }
}

function worldClockZone() {
  document.getElementById("Newyork").innerHTML = worldClock(-5, "NAmerica")
  document.getElementById("London").innerHTML = worldClock(0, "Europe")
  document.getElementById("Tokyo").innerHTML = worldClock(-15, "Greenwich")
  document.getElementById("Sydney").innerHTML = worldClock(-14, "Greenwich")

  setTimeout("worldClockZone()", 1000)
}
window.onload = worldClockZone;
<table style="margin-top: -12px; margin-right: 5px;">
<tr class="hrow">
<td><h5 style="font-size: 11px;">NY</h5>&nbsp;<span id="Newyork" class="user-status" style="font-size: 11px;"></span></td>

<td><h5 style="font-size: 10px;">London </h5>&nbsp;</i><span id="London" class="user-status" style="font-size: 11px;"></span><div style="border-left:1px solid #D3D3D3;height:40px;position: fixed; margin-top: -40px;"></div></td>

<td><h5 style="font-size: 11px;">Tokyo</h5>&nbsp;</i><span id="Tokyo" class="user-status" style="font-size: 11px;"></span><div style="border-left:1px solid #D3D3D3;height:40px;position: fixed; margin-top: -40px;"></div></td>
<td><h5 style="font-size: 11px;">Sydney</h5>&nbsp;<span id="Sydney" class="user-status" style="font-size: 11px;"></span><div style="border-left:1px solid #D3D3D3;height:40px;position: fixed; margin-top: -40px;"></div></td>
</tr>
</table>

【问题讨论】：

  • 请edit您的问题添加运行代码的HTML。我添加了一个堆栈片段，因此您可以单击“编辑上面的 sn-p”链接并将 HTML 粘贴到相应的部分。
  • 嗨@HereticMonkey，对不起，这是我的第一个问题。我刚才确实用相应的 html 代码编辑了我的问题，但我不确定它是否正确。感谢您的评论兄弟

标签： javascript html date time


【解决方案1】：

问题在于你对 hr 的评估会导致状态。如所写，状态将始终为红色。这是一个修复：

function worldClock(zone, region){
var dst = 0
var time = new Date()
var gmtMS = time.getTime() + (time.getTimezoneOffset() * 60000)
var gmtTime = new Date(gmtMS)
var day = gmtTime.getDate()
var month = gmtTime.getMonth()
var year = gmtTime.getYear()
if(year < 1000){
year += 1900
}
var monthArray = new Array("Jan", "Fev", "Mar", "Apr", "May", "Jun", "Jul", "Aug", 
                "Sep", "Oct", "Nov", "Dec")
var monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
if (year%4 == 0){
monthDays = new Array("31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
}
if(year%100 == 0 && year%400 != 0){
monthDays = new Array("31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31")
}

var hr = gmtTime.getHours() + zone
var min = gmtTime.getMinutes()
var sec = gmtTime.getSeconds()

var status = new Array("")

if (hr >= 24){
hr = hr-24
day -= -1
}
if (hr < 0){
hr -= -24
day -= 1
}
if (hr < 10){
hr = " " + hr
}
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if (day <= 0){
if (month == 0){
    month = 11
    year -= 1
    }
    else{
    month = month -1
    }
day = monthDays[month]
}
if(day > monthDays[month]){
    day = 1
    if(month == 11){
    month = 0
    year -= -1
    }
    else{
    month -= -1
    }
}
if (region == "NAmerica"){
    var startDST = new Date()
    var endDST = new Date()
    startDST.setMonth(3)
    startDST.setHours(2)
    startDST.setDate(1)
    var dayDST = startDST.getDay()
    if (dayDST != 0){
        startDST.setDate(8-dayDST)
        }
        else{
        startDST.setDate(1)
        }
    endDST.setMonth(9)
    endDST.setHours(1)
    endDST.setDate(31)
    dayDST = endDST.getDay()
    endDST.setDate(31-dayDST)
    var currentTime = new Date()
    currentTime.setMonth(month)
    currentTime.setYear(year)
    currentTime.setDate(day)
    currentTime.setHours(hr)
    if(currentTime >= startDST && currentTime < endDST){
        dst = 1
        }
}
if (region == "Europe"){
    var startDST = new Date()
    var endDST = new Date()
    startDST.setMonth(2)
    startDST.setHours(1)
    startDST.setDate(31)
    var dayDST = startDST.getDay()
    startDST.setDate(31-dayDST)
    endDST.setMonth(9)
    endDST.setHours(0)
    endDST.setDate(31)
    dayDST = endDST.getDay()
    endDST.setDate(31-dayDST)
    var currentTime = new Date()
    currentTime.setMonth(month)
    currentTime.setYear(year)
    currentTime.setDate(day)
    currentTime.setHours(hr)
    if(currentTime >= startDST && currentTime < endDST){
        dst = 1
        }

}
    if(time.getDay() == 6 || time.getDay() == 0){
      status = "red";
    }
    else if (hr >= 9 && hr < 17) {
      status = "limegreen";
    }
    else {
      status = "red";
    }
    
if (dst == 1){
    hr -=55 -1
    if (hr >= 24){
    hr = hr-24
    day -= -1
    }
    if (hr < 10){
    hr = " " + hr
    }

    if(day > monthDays[month]){
    day = 1
    if(month == 11){
    month = 0
    year -= -1
    }
    else{
    month -= -1
    }

    }


return '<i class="fa fa-circle" style="color: ' + status + ';"></i><br>' + monthArray[month] + " " + day + " " + "<br>" + hr + ":" + min + ":" + sec + " " + "<br>"
}
else{
return '<i class="fa fa-circle" style="color: ' + status + ';"></i><br>' + monthArray[month] + " " + day + " " + "<br>" + hr + ":" + min + ":" + sec + " " + "<br>"

}
}

function worldClockZone(){
document.getElementById("Newyork").innerHTML = worldClock(-5, "NAmerica")
document.getElementById("London").innerHTML = worldClock(0, "Europe")
document.getElementById("Tokyo").innerHTML = worldClock(-15, "Greenwich")
document.getElementById("Sydney").innerHTML = worldClock(-14, "Greenwich")

setTimeout("worldClockZone()", 1000)
}

worldClockZone()
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"></script>

<div id="Newyork"></div>
<div id="London"></div>
<div id="Tokyo"></div>
<div id="Sydney"></div>

【讨论】：

  • 非常感谢您的回复。该解决方案似乎有效，正如您所说，我对 hr status 进行了错误的调用，但我没有注意到。啧啧！我现在必须为每个区域设置不同的时间条件，现在对我来说应该很容易。再次感谢伙计！
【解决方案2】：

您的问题有答案，购买您的代码似乎比需要的复杂得多。考虑利用 Intl.DateTimeFormat 构造函数和formatToParts。以下仅使用时间，您可能希望包括星期几、节假日等。

function isMarketOpen(loc, tz, open, close, date = new Date()) {
  // Get time in particular location for given date
  let f = new Intl.DateTimeFormat('default', {
    hour: '2-digit',
    minute: '2-digit',
    timeZone: tz,
    timeZoneName: 'short'
  });
  let {hour, minute, timeZoneName} = f.formatToParts(date).reduce((acc, part) => {
    if (part.type != "literal") {
      acc[part.type] = part.value;
    }
    return acc;
  }, Object.create(null));
  // Return based on whether it's between open and close or not
  let time = hour*60 + minute*1;
  return `${loc} is ${time >= open && time <= close? 'open':'closed'} (${hour}:${minute} ${timeZoneName}).`;
}

// Sample data
let data = [
  {loc: 'New York',
   tz:  'America/New_York',
   open: 540, // Minutes
   close: 1020
  },{
   loc: 'London',
   tz:  'Europe/London',
   open: 480,
   close: 960
  }
];
// Show open/closed
data.forEach(obj => console.log(
  isMarketOpen(obj.loc, obj.tz, obj.open, obj.close)
));

【讨论】：

  • 我感谢您的宝贵时间！ Bertrand 上面的解决方案似乎对我有用。但我肯定会测试你的代码，因为它看起来更简单！目前我只是为周末或 x>y 时间设置条件，稍后我想为每个区域添加多个条件，以及市场关闭的一年中的特定日期。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-14
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode