Question

我想展示两次：您所在国家的一次和日本使用JS的一次
问题在于第二个setInterval会停止第一个setInterval，而我不知道如何使两者同时运行。

完整代码

<html>
<head></head>
<body>
      <p style="font-size: 20px; font-family: SF Compact Display;">In your region:</p>
      <script type="text/javascript">
         document.write ('<p><span id="date-time">', new Date().toLocaleString(), '<\/span><\/p>')
         if (document.getElementById) onload = function() {
            setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
      }
         </script>



      <p style="font-size: 20px; font-family: SF Compact Display;">In Japan:</p>

      <script type="text/javascript">
         var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Tokyo"});
            asiaTime = new Date(asiaTime);
         var options = {dateStyle: 'medium', hour:'numeric', minute:'numeric', second:'numeric'}
            console.log('Asia time: '+asiaTime.toLocaleString(options))
            document.write ('<p><span id="japantime">', asiaTime, '<\/span><\/p>')
         if (document.getElementById) onload = function() {
            function japanTime() {
               document.getElementById('japantime').firstChild.data = asiaTime
            }
            setInterval ("document.getElementById ('japantime').firstChild.data = new Date().toLocaleString()", 50)
         }
         </script>
</body>
</html>

如果有人可以帮助我，那就太酷了！

Answer 1

这是编写代码的一种非常怪异的方式，但是无论如何，这都会使您无所适从。我不会尝试更改您的所有代码，因为这不是问题的一部分。

由于时间间隔上的时间完全相同，因此您可以只使用一个来完成您想要的事情：

<html>
<head></head>
<body>
      <p style="font-size: 20px; font-family: SF Compact Display;">In your region:</p>
      <script type="text/javascript">
         document.write ('<p><span id="date-time">', new Date().toLocaleString(), '<\/span><\/p>')
      </script>

      <p style="font-size: 20px; font-family: SF Compact Display;">In Japan:</p>

      <script type="text/javascript">
         var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Tokyo"});
         asiaTime = new Date(asiaTime);

         var options = {dateStyle: 'medium', hour:'numeric', minute:'numeric', second:'numeric'}
         console.log('Asia time: '+asiaTime.toLocaleString(options))
         document.write ('<p><span id="japantime">', asiaTime, '<\/span><\/p>')

         if (document.getElementById) onload = function() {
           setInterval(function () {
             var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Tokyo"});

             document.getElementById ('date-time').firstChild.data = new Date().toLocaleString();
             document.getElementById('japantime').firstChild.data = asiaTime
           }, 50)
         }
         </script>
</body>
</html>

您的japantime函数未在任何地方使用，因此我将其删除。我还认为您可以通过尝试一些方法剩下一些代码。我试图整理一下。

检查结果是否符合您的要求，但看起来像您想要的那样。

关于一次运行多个时间间隔，我建议您看一下这个答案，解释计时器如何在JS中工作。该页面上还有几个链接，其中包含更多信息：

Timing in JS - multiple setIntervals running at once and starting at the same time?

Answer 2

请为两者都使用相同的setInterval。
+不要在代码中混用CSS / HTML / JS。
.....（每个人都在他的位置，（{{1}之前的js）
+ 1000毫秒更好

最终代码如下：

</body>

测试：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Date Time</title>
  <style>
    .sf20 {
      font-size: 20px;
      font-family: SF Compact Display;
    }
  </style>
</head>
<body>
  <p class="sf20">In your region:</p>
  <p><span id="local-time"></span></p>

  <p class="sf20">In Japan:</p>
  <p><span id="japan-time"></span></p>
<script>
  const LocalTime = document.getElementById('local-time')
    ,   JapanTime = document.getElementById('japan-time')
    ;
  setInterval(() => {
    let LocalDate = new Date()
    LocalTime.textContent = LocalDate.toLocaleString()
    JapanTime.textContent = LocalDate.toLocaleString("en-US", {timeZone: "Asia/Tokyo"})
  }, 1000); // =1s
</script>
</body>
</html>

const LocalTime = document.getElementById('local-time')
  ,   JapanTime = document.getElementById('japan-time')
  ;
setInterval(() => {
  let LocalDate = new Date()

  LocalTime.textContent = LocalDate.toLocaleString()
  JapanTime.textContent = LocalDate.toLocaleString("en-US", {timeZone: "Asia/Tokyo"})
}, 1000); // =1s

.sf20 {
  font-size: 20px;
  font-family: SF Compact Display;
}

为什么我的第一个setInterval停止而第二个继续运行？

2 个答案: