javascript - UTC 实时时钟，不适用于负时区

Question

在我的应用程序中，我需要根据存储在数据库中的不同时区创建实时时钟。

我几乎成功了。

但现在我正面临时钟倒计时，我想不出解决方案。

我在 new Date() 的帮助下获取 UTC 时间，并使用数据库提供的时区计算时间。

情况 1:0:31(UTC 时间)+ 5:30(时区)= '06:01'

情况 2:06:31(UTC 时间)- 6:30(时区)= '00:01'

情况 3:5:0(UTC 时间)- 7:0(时区)= '-02:00'

情况 1 和情况 2 工作正常，但我在第三种情况下得到负值，这是错误的。

我尝试在代码中添加注释，以便更好地理解我在这里所做的事情。希望对您有所帮助。

我们将不胜感激任何帮助。

function runClock() {

  setInterval(function() {
    //debugger
    var time = new Date();
    // take timezone from HTML element
    // ex: +:5:30
    var getTimezone =  "-:7:0" //$("#timeZone").text();

    // split into array to get oparator (Positive and Negative Timezone)
    var oparator = getTimezone.split(":")[0];
    var timezone = getTimezone.split(":")[1] + ":" + getTimezone.split(":")[2];

    // get UTC hours
    var hours = 5 //time.getUTCHours();
    var minutes = 0 //time.getUTCMinutes();
    var UTCTIME = timeStringToFloat(hours + ":" + minutes);
    var TIMEZONEOFFSETTIME = timeStringToFloat(timezone);
    var finalTime = "";


    // Convert time folloed by Colon into decimals
    // ex: 1:45 = 1.75
    function timeStringToFloat(time) {
      var hoursMinutes = time.split(/[.:]/);
      var hh = parseInt(hoursMinutes[0], 10);
      var mm = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
      return hh + mm / 60;
    }


    // Convert time folloed by float into Colon
    // ex: 1.75 = 1:45
    function floatToTime(FT) {
      var splittedTime = FT.toString().split(".");
      var hh = splittedTime[0];
      var mm = "";

      if (splittedTime[1]) {
        mm = Math.round((splittedTime[1] / 100) * 60);
      } else {
        mm = "0";
      }

      finalTime = hh + ":" + ((mm < 10) ? ("0" + mm) : mm);
    }


    // Calculate time (UTC + or - Timezone)
    // Ex: 00:15 (UTC) + 5:30 = 5:45
    function CalcTime(UTCTIME, TIMEZONEOFFSETTIME) {
      if (oparator == "+") {
        var FT = UTCTIME + TIMEZONEOFFSETTIME;
        FT = FT.toFixed(2);
        floatToTime(FT);
      } else {
        var FT = UTCTIME - TIMEZONEOFFSETTIME;
        FT = FT.toFixed(2);
        floatToTime(FT);
      }
    }


    // Parse Seconds
    function seconds() {
      var j = "";
      if (time.getUTCSeconds() < 10) {
        j = "0" + time.getUTCSeconds();
      } else {
        j = time.getUTCSeconds()
      }
      return j;
    }

    CalcTime(UTCTIME, TIMEZONEOFFSETTIME);

    $("#clockTime").text(finalTime + ":" + seconds());
  }, 1000);

}
runClock();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<b id="clockTime"></b>

Answer 1

当你变成负数时，你应该“循环回到”23:59。您可以添加一些东西来检查它是否变为负数，然后重新添加缺少的时间:

function CalcTime(UTCTIME, TIMEZONEOFFSETTIME) {
      if (oparator == "+") {
        var FT = UTCTIME + TIMEZONEOFFSETTIME;
        FT = FT.toFixed(2);
        floatToTime(FT);
      } else {
        var FT = UTCTIME - TIMEZONEOFFSETTIME;

        // Offset any negative times;
        if (FT < 0) {
          FT += 24;
        }

        FT = FT.toFixed(2);
        floatToTime(FT);
      }
    }

但理想情况下，您真的不想处理这些类型的时区问题，因为其他库已经在处理它，即 moment.js

function runClock() {

  setInterval(function() {
    //debugger
    var time = new Date();
    // take timezone from HTML element
    // ex: +:5:30
    var getTimezone =  "-:7:0" //$("#timeZone").text();

    // split into array to get oparator (Positive and Negative Timezone)
    var oparator = getTimezone.split(":")[0];
    var timezone = getTimezone.split(":")[1] + ":" + getTimezone.split(":")[2];

    // get UTC hours
    var hours = 5 //time.getUTCHours();
    var minutes = 0 //time.getUTCMinutes();
    var UTCTIME = timeStringToFloat(hours + ":" + minutes);
    var TIMEZONEOFFSETTIME = timeStringToFloat(timezone);
    var finalTime = "";


    // Convert time folloed by Colon into decimals
    // ex: 1:45 = 1.75
    function timeStringToFloat(time) {
      var hoursMinutes = time.split(/[.:]/);
      var hh = parseInt(hoursMinutes[0], 10);
      var mm = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
      return hh + mm / 60;
    }


    // Convert time folloed by float into Colon
    // ex: 1.75 = 1:45
    function floatToTime(FT) {
      var splittedTime = FT.toString().split(".");
      var hh = splittedTime[0];
      var mm = "";

      if (splittedTime[1]) {
        mm = Math.round((splittedTime[1] / 100) * 60);
      } else {
        mm = "0";
      }

      finalTime = hh + ":" + ((mm < 10) ? ("0" + mm) : mm);
    }


    // Calculate time (UTC + or - Timezone)
    // Ex: 00:15 (UTC) + 5:30 = 5:45
    function CalcTime(UTCTIME, TIMEZONEOFFSETTIME) {
      if (oparator == "+") {
        var FT = UTCTIME + TIMEZONEOFFSETTIME;
        FT = FT.toFixed(2);
        floatToTime(FT);
      } else {
        var FT = UTCTIME - TIMEZONEOFFSETTIME;
        
        // Offset any negative times;
        if (FT < 0) {
          FT += 24;
        }
        
        FT = FT.toFixed(2);
        floatToTime(FT);
      }
    }


    // Parse Seconds
    function seconds() {
      var j = "";
      if (time.getUTCSeconds() < 10) {
        j = "0" + time.getUTCSeconds();
      } else {
        j = time.getUTCSeconds()
      }
      return j;
    }

    CalcTime(UTCTIME, TIMEZONEOFFSETTIME);

    $("#clockTime").text(finalTime + ":" + seconds());
  }, 1000);

}
runClock();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<b id="clockTime"></b>