倒数计时器的位置特定？

Question

我在我的网站上添加了一个JS倒数计时器，但只是意识到它没有引用用户的地理位置...

例如，如果该事件在太平洋时间周日下午3点，计时器将反映东海岸时间下午3点，而不是下午6点...是否有办法使计时器适应位置？

代码如下：

(function($) {
    $.fn.countdown = function(options, callback) {

        //custom 'this' selector
        thisEl = $(this);

        //array of custom settings
        var settings = { 
            'date': null,
            'format': null
        };

        //append the settings array to options
        if(options) {
            $.extend(settings, options);
        }

        //main countdown function
        function countdown_proc() {

            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);

            if(eventDate <= currentDate) {
                callback.call(this);
                clearInterval(interval);
            }

            seconds = eventDate - currentDate;

            days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
            seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

            //conditional Ss
            if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
            if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
            if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
            if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

            //logic for the two_digits ON setting
            if(settings['format'] == "on") {
                days = (String(days).length >= 2) ? days : "0" + days;
                hours = (String(hours).length >= 2) ? hours : "0" + hours;
                minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
            }

            //update the countdown's html values.
            if(!isNaN(eventDate)) {
                thisEl.find(".days").text(days);
                thisEl.find(".hours").text(hours);
                thisEl.find(".minutes").text(minutes);
                thisEl.find(".seconds").text(seconds);
            } else { 
                alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
                clearInterval(interval); 
            }
        }

        //run the function
        countdown_proc();

        //loop the function
        interval = setInterval(countdown_proc, 1000);

    }
}) (jQuery);

编辑：

好的，刚才注意到您还提供了html代码。...

这是我现在的设置：

html-

<!-- countdown start -->
<div id="countdown-wrapper">
<ul id="countdown">

<!-- days start -->
<li>
<span class="days">00</span>
<p class="timeRefDays">days</p>
</li>

<!-- hours start -->
<li>
<span class="hours">00</span>
<p class="timeRefHours">hours</p>
</li>

<!-- minutes start -->
<li>
<span class="minutes">00</span>
<p class="timeRefMinutes">minutes</p>
</li>

<!-- seconds start -->
<li>
<span class="seconds">00</span>
<p class="timeRefSeconds">seconds</p>
</li>

</ul>
</div>
<!-- end countdown -->

这是同一页底部的脚本：

//<![CDATA[
$(document).ready(function(){
"use strict";
$("#countdown").countdown({
date: "03 February 2019 15:30:00", // countdown target date settings
format: "on"
},

function() {
// callback function
});
});
//]]>

我早些时候发布了countdown.js文件

那么我该如何将您的代码与此相关？

需要明确的是，我只想在我的网站上显示1（一个）倒数计时器，将其设置为pt，但是我希望它能反映每个用户的地理位置，即如果我在西海岸并且倒数计时显示对我来说是1个小时，我希望它为东海岸用户显示4个小时...

再次感谢dan，非常感谢您的帮助！

Answer 1

有一种方法可以执行此操作，您可以根据自己的目的使用地理位置API。您需要以下内容：

if ("geolocation" in navigator) {
  /* geolocation is available */
  navigator.geolocation.getCurrentPosition(/* more code here */)
} else {
  /* geolocation IS NOT available, so for example: */
  setGenericTimer()
}

但是，他们确实指出了这一警告：

  

默认情况下，getCurrentPosition（）尝试尽可能快地回答   结果准确性低。如果您需要快速回答，这将很有用   不管精度如何。例如，带有GPS的设备可以   一分钟或更长时间才能获取GPS定位信息，因此数据精度较低（IP位置   或wifi）返回给getCurrentPosition（）。

查看文档：

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Answer 2

实际上比您想象的要简单。问题是您的输入。您没有告诉它要使用哪个时区。您的错误示例建议“有效日期”字符串为“ 12 Tuesday 2012 17:30:00”。那就是问题所在。当您在浏览器中使用Javascript时，系统会知道它所在的时区，并且每当您创建时间戳时，它都会将时间转换为首选的编程时区GMT。这意味着只要您知道目标时区是什么，并且也可以将其转换为GMT，就可以确定目的地。

首先，我假设本例中的“星期二”是一个月（我将选择12月作为一个有趣的数字）。大多数情况下，系统使用类似ISO-8601格式（2012-12-12T09:30:00.000Z）的格式，我建议您使用该格式或UNIX时间戳（1355304600000），但您甚至可以使用基于偏移量的时间：Dec 12 2012 17:30:00 GMT-0800（如果您要自己解析）。

console.info(new Date().toString()); // "Thu Jan 31 2019 17:21:01 GMT-0700 (Mountain Standard Time)"
console.info(new Date().toISOString()); // "2019-02-01T00:21:57.468Z" (that's the current time in GMT)
console.info(new Date().getTimezoneOffset()); // 420 (that's minutes between me and GMT)
console.info(Date.now()); // 1548980627330 (unix timestamp)

或者，您可以使用诸如moment-timezone（https://momentjs.com/timezone/）之类的东西来为您处理时区部分。

根据您的问题进行编辑

您编写的代码没有错

(function($) {
    $.fn.countdown = function(options, callback) {
        var interval; // I added this to keep this variable in scope
        //custom 'this' selector
        var thisEl = $(this); // I added the `var` to keep this variable in scope so you can put more than one on a page.

        //array of custom settings
        var settings = { 
            'date': null,
            'format': null
        };

        //append the settings array to options
        if(options) {
            $.extend(settings, options);
        }

        //main countdown function
        function countdown_proc() {

            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);

            if(eventDate <= currentDate) {
                callback.call(this);
                clearInterval(interval);
            }

            seconds = eventDate - currentDate;

            days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
            seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

            //conditional Ss
            if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
            if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
            if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
            if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }

            //logic for the two_digits ON setting
            if(settings['format'] == "on") {
                days = (String(days).length >= 2) ? days : "0" + days;
                hours = (String(hours).length >= 2) ? hours : "0" + hours;
                minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
            }

            //update the countdown's html values.
            if(!isNaN(eventDate)) {
                thisEl.find(".days").text(days);
                thisEl.find(".hours").text(hours);
                thisEl.find(".minutes").text(minutes);
                thisEl.find(".seconds").text(seconds);
            } else { 
                alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
                clearInterval(interval); 
            }
        }

        //run the function
        countdown_proc();

        //loop the function
        interval = setInterval(countdown_proc, 1000);

    }
    
    // Eastern Time
    $('#countdown-eastern').countdown({ date: '2020-02-01T22:00:00Z'}, function () {
    console.info('done')
    })
    // Pacific Time
    $('#countdown-pacific').countdown({ date: '2020-02-02T01:00:00Z'}, function () {
    console.info('done')
    })
}) (jQuery);

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

<div id="countdown-eastern">
  <p>Until February 1, 2020, 5PM Eastern Time</p>
  <span class="days"></span>
  <span class="timeRefDays"></span>
  <span class="hours"></span>
  <span class="timeRefHours"></span>
  <span class="minutes"></span>
  <span class="timeRefMinutes"></span>
  <span class="seconds"></span>
  <span class="timeRefSeconds"></span>
</div>

<div id="countdown-pacific">
  <p>Until February 1, 2020, 5PM Pacific Time</p>
  <span class="days"></span>
  <span class="timeRefDays"></span>
  <span class="hours"></span>
  <span class="timeRefHours"></span>
  <span class="minutes"></span>
  <span class="timeRefMinutes"></span>
  <span class="seconds"></span>
  <span class="timeRefSeconds"></span>
</div>

要明确一点：我在文件顶部添加了两个var声明，并且仅根据想要的时区更改了进入.countdown（）函数的日期。进入。

Answer 3

谢谢你……

我该在哪里添加脚本？例如，这是我文档中引用上面我发布的脚本的脚本，我是否会将您发布的代码添加到此脚本中？

    //<![CDATA[
    $(document).ready(function(){
    "use strict";
    $("#countdown").countdown({
    date: "03 February 2019 15:30:00", // countdown target date settings
    format: "on"
    },

    function() {
    // callback function
    });
    });
    //]]>