将UTC时间添加到倒数计时器

时间:2015-09-15 00:47:08

标签: javascript jquery timer clock countdown

我最近在倒计时脚本中搜索,倒计时到特定的日期,小时和分钟,并在达到时间后再次重置。

现在一周后,我发现剧本中存在一个重大问题。倒计时基于当地时间,这是一个问题。

我想根据UTC时间而不是本地pc时间进行倒计时。 任何可以帮助我的人,因为我不知道该怎么做。我还制作了一个我使用的时钟脚本,我可以说" .getUTC ..."但是我不知道如何在这个脚本中实现它,因为我从互联网上获取它。

我在javascript / jquery中表现不佳,而且我还在学习很多东西。我可以很好地理解这些脚本,但是我很想念自己没有编写脚本,所以如果你可以根据UTC时间编辑脚本并告诉我一些关于它的话我会从中学习,这将是非常好的。它。我真的很喜欢这个!

非常感谢, 延



var EVENTDAY = 1; // monday
var EVENTHOUR = 22; //
var EVENTMINUTE = 42; //
    
function getRemaining( now )
{
    if ( now == null ) now = new Date();

    var dow = now.getDay();
    // the "hour" for now must include fractional parts of the hour, so...
    var hour = now.getHours() + now.getMinutes()/60 + now.getSeconds()/3600;

    // how many days from current day until event day?
    var offset = EVENTDAY - dow;

    // if event day is past *OR* if today is the event day but the event time is past...
    if ( offset < 0 || ( offset == 0 && EVENTHOUR < hour ) )
    {
        // we are past the event time in current week, so 
        // target EVENTDAY is next week:
        offset += 7; 
    }

    // so this date (day of the month) is the next occurrence of the event:
    var eventDate = now.getDate() + offset; 

    // and so then next occurrence of the event is at this time:
    var eventTime = new Date( now.getFullYear(), now.getMonth(), eventDate, 
                              EVENTHOUR, EVENTMINUTE, 0 ); 

    // this is how many milliseconds from now to the next event occurrence
    var millis = eventTime.getTime() - now.getTime();

    // convert milliseconds to days/hours/minutes/seconds:
    var seconds = Math.round( millis / 1000 );
    var minutes = Math.floor( seconds / 60 );
    seconds %= 60;
    var hours = Math.floor( minutes / 60);
    minutes %= 60;
    var days = Math.floor( hours / 24 );
    hours %= 24;
    if ( seconds < 10 ) seconds = "0" + seconds;
    if ( minutes < 10 ) minutes = "0" + minutes;
    if ( hours < 10 ) hours = "0" + hours;
    if ( days == 1 ) {
	days = days + " day, ";
    } 
    else {
	days = days + " days, ";
    }
    // and return that formatted pretty:
    return days + hours + ":" + minutes + ":" + seconds;
    
}

function tick()
{
    // this is the automatic once a second display:
    document.getElementById("countdown").innerHTML = getRemaining();
}
setInterval( tick, 1000 ); // specifies once a second

// here is a demo that allows you to test the function 
// by specifying a date and time in the <form> below
function demo( form )
{
    var t = form.theDate.value.split("/");
    var mn = Number(t[0]);
    var dy = Number(t[1]);
    var yr = Number(t[2]);
    var t = form.theTime.value.split(":");
    var hr = Number(t[0]);
    var mi = Number(t[1]);
    var sc = Number(t[2]);
    // so this is the test date/time that you specified:
    var test = new Date( yr, mn-1, dy, hr, mi, sc );

    // and here we call the master function and put its answer in the <form>:
    form.remaining.value = getRemaining( test );
}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

使用Jcounter

更改jquery.jCounter-0.1.4.js文件中的第34行

serverDateSource: '/pathtofile/dateandtime.php', //path to dateandtime.php file (i.e. http://my-domain.com/dateandtime.php)
dateandtime.php文件中的

<?php
ini_set('display_errors', 0); error_reporting(E_ALL);

date_default_timezone_set("Pacific/Auckland");  // CHANGE HERE
// GMT +12
if (isset($_GET['timezone'])) {
$timezone = new DateTimeZone($_GET['timezone']);
} else {
$timezone = new DateTimeZone("Pacific/Auckland");//CHANGE HERE
}
$date = new DateTime();
$date->setTimezone($timezone);
$dateAndTime = array("currentDate"=>$date->format('d F Y H:i:s'));
echo $_GET['callback'] . '(' . json_encode($dateAndTime) . ')';
?>

然后在倒数计时器文件中设置如下:

<?php
date_default_timezone_set("Pacific/Auckland");//GMT+12 <--- CHANGE THIS
//Set your date and time below.
$day = date("D");
$hour = date("H");
if ($day=="Sun" && $hour>='9') {$date = date('d F Y H:i:s', strtotime('next Sunday 09:00:00'));}
else {$date = date('d F Y H:i:s', strtotime('this Sunday 09:00:00'));}
?>
<script type="text/javascript">
    $(document).ready(function() {
        $(".mycountdownname").jCounter({
            animation: "slide",
            date: "<?=$date?>", //format: DD month YYYY HH:MM:SS
            timezone: "Pacific/Auckland",
            format: "dd:hh:mm:ss",
            twoDigits: 'on',
            callback: function() { console.log("Event Ended!")     }
    });
});
</script>
    <div class="mycountdownname">
    <div class="countdown-theme">
        <ul>
            <li><p><span><em><b class="days">00</b><i class="daysSlider"><u>00</u><u>00</u></i></em>DAYS</span></p></li>
            <li><p><span><em><b class="hours">00</b><i class="hoursSlider"><u>00</u><u>00</u></i></em>HOURS</span></p></li>
            <li><p><span><em><b class="minutes">00</b><i class="minutesSlider"><u>00</u><u>00</u></i></em>MINS</span></p></li>
            <li><p><span><em><b class="seconds">00</b><i class="secondsSlider"><u>00</u><u>00</u></i></em>SECS</span></p></li>
        </ul>
        <div class="jC-clear"></div><br>
        <div class="jC-clear"></div>
    </div>
    </div>

答案 1 :(得分:0)

您已在此处使用if ( now == null ) now = new Date();

new Date().getTime()

你快到了。让我们看看一些有用的功能。

new Date().toUTCString()

将返回utc时间。

new Date().getTimezoneOffset()

返回UTC时间戳的字符串表示。

foo.setHours(foo.getHours() + (foo.getTimezoneOffset() / 60)).getTimezoneOffset()

返回为获取UTC值而添加的分钟数。因此,这是您获取UTC时间戳的方法:

foo

其中Datefunction getUTCDate(input) { return input.setHours(input.getHours() + (input.getTimezoneOffset() / 60)).getTimezoneOffset(); } 个对象。

因此,这是您获取日期的UTC值的方式:

var now = getUTCDate(new Date());

这是您使用它的方式:

C:\Python27\Lib\site-packages\