Question

我有一个专门针对特定游戏的小粉丝网站。现在在那个游戏中有两个现场活动在一段时间后重置。第一个重置每18小时，另一个重置每周（同一天同一天）。我一直在编写一个脚本来放置网站，以显示下次重置事件的时间。我让它在大多数情况下都有效：

timer.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="timer.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>

<div id="daily">
  <p ></p>
</div>

<div id="weekly">
  <p ></p>
</div>

</body>
</html>

的style.css

@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
#daily, #weekly {
  background: #333;
  font-family: 'Lato', sans-serif;
  text-align: center;
  color: #eee;
  text-shadow: 1px 1px 5px black;
  padding: 1rem 0;
  font-size: 3rem;
  border: 1px solid #000;
}

timer.js

setInterval(function time(){

// Get strating and current date
var startDate = new Date("January 7, 2016 07:00:00");
var currentDate = new Date();

// Calcualte time passed since the start
var timePassed = currentDate.getTime() - startDate.getTime();
var convertToSeconds = Math.floor(timePassed / 1000 );
var convertToMinutes = Math.floor(convertToSeconds / 60);
var convertToHours = Math.floor(convertToMinutes / 60);
var convertToDays = Math.floor(convertToHours / 24);

// Calculate time since last daily (18h) reset
var lastResetSeconds = convertToSeconds % 60;
var lastResetMinutes = convertToMinutes % 60;
var lastResetHoursDaily = convertToHours % 18;

// Calculate time since last weekly (7d) reset
var lastResetHoursWeekly = convertToHours % 24;
var lastResetDay = convertToDays % 7;

// Calculate remaining time until next daily (18h) reset
var remainingSeconds = 59 - lastResetSeconds;
var remainingMinutes = 59 - lastResetMinutes;
var remainingHoursDaily = 17 - lastResetHoursDaily;

// Calculate remaining time until next weekly (7d) reset
var remainingHoursWeekly = 23 - lastResetHoursWeekly;
var remainingDays = 6 - lastResetDay;

// If any of the variables is only a single digit number, then add 0 before
if((remainingSeconds + '').length == 1){
  remainingSeconds = '0' + remainingSeconds;
}
if((remainingMinutes + '').length == 1){
  remainingMinutes = '0' + remainingMinutes;
}
if((remainingHoursDaily + '').length == 1){
  remainingHoursDaily = '0' + remainingHoursDaily;
}
if((remainingHoursWeekly + '').length == 1){
  remainingHoursWeekly = '0' + remainingHoursWeekly;
}
if((remainingDays + '').length == 1){
  remainingDays = '0' + remainingDays;
}

// Print
jQuery('#daily p').html(remainingHoursDaily+':'+remainingMinutes+':'+remainingSeconds)
jQuery('#weekly p').html(remainingDays+':'+remainingHoursWeekly+':'+remainingMinutes+':'+remainingSeconds)
}, 1000);

时区问题

JS计算客户端时间而不是服务器端，这是一个问题。这是在PDT区域的某个特定时间开始的事件，并且每18小时重新启动一次。因此，当我查看此页面时，我会从开始时间和当前日期计算时间，而不是来自服务器的时间。

我在这里寻找的是开始日期和当前日期是从服务器而不是客户端使用的。现在，我意识到JS是客户端运行的，所以我需要的是一种解决方法。

然后我尝试使用php导致同样的问题因为剩余时间似乎很遥远。为了进一步添加问题列表，jQuery不再倒计时，而只是显示加载脚本/页面时剩余的时间。

timer.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<?php

    date_default_timezone_set('America/Los_Angeles');
    $rawDateStart = date('F j, Y H:i:s', date_timestamp_get(DateTime::createFromFormat('F j, Y H:i:s', 'January 7, 2016 07:00:00')));
    $rawDateCurrent = date('F j, Y H:i:s');
?>

<script>
setInterval(function time(){

    // Get strating and current date
    //var startDate = new Date("January 7, 2016 07:00:00");
    //var currentDate = new Date();
    var startDate = new Date("<? echo $rawDateStart; ?>");
    var currentDate = new Date("<? echo $rawDateCurrent; ?>");

    // Calcualte time passed since the start
    var timePassed = currentDate.getTime() - startDate.getTime();
    var convertToSeconds = Math.floor(timePassed / 1000 );
    var convertToMinutes = Math.floor(convertToSeconds / 60);
    var convertToHours = Math.floor(convertToMinutes / 60);
    var convertToDays = Math.floor(convertToHours / 24);

    // Calculate time since last daily (18h) reset
    var lastResetSeconds = convertToSeconds % 60;
    var lastResetMinutes = convertToMinutes % 60;
    var lastResetHoursDaily = convertToHours % 18;

    // Calculate time since last weekly (7d) reset
    var lastResetHoursWeekly = convertToHours % 24;
    var lastResetDay = convertToDays % 7;

    // Calculate remaining time until next daily (18h) reset
    var remainingSeconds = 59 - lastResetSeconds;
    var remainingMinutes = 59 - lastResetMinutes;
    var remainingHoursDaily = 17 - lastResetHoursDaily;

    // Calculate remaining time until next weekly (7d) reset
    var remainingHoursWeekly = 23 - lastResetHoursWeekly;
    var remainingDays = 6 - lastResetDay;

    // If any of the variables is only a single digit number, then add 0 before
    if((remainingSeconds + '').length == 1){
      remainingSeconds = '0' + remainingSeconds;
    }
    if((remainingMinutes + '').length == 1){
      remainingMinutes = '0' + remainingMinutes;
    }
    if((remainingHoursDaily + '').length == 1){
      remainingHoursDaily = '0' + remainingHoursDaily;
    }
    if((remainingHoursWeekly + '').length == 1){
      remainingHoursWeekly = '0' + remainingHoursWeekly;
    }
    if((remainingDays + '').length == 1){
      remainingDays = '0' + remainingDays;
    }

    // Print
    jQuery('#daily p').html(remainingHoursDaily+':'+remainingMinutes+':'+remainingSeconds)
    jQuery('#weekly p').html(remainingDays+':'+remainingHoursWeekly+':'+remainingMinutes+':'+remainingSeconds)
}, 1000);
</script>

<div id="daily"><p ></p></div>
<div id="weekly"><p ></p></div>

</body>
</html>

所以我被困，没有任何想法如何继续。任何指针都会受到欢迎。老实说我很难用时间/约会的东西。

Answer 1

你很亲密。问题是每次currentDate处理程序运行时，setInterval()都使用相同的值。因此，即使计算每秒进行一次，输出也不会改变，所以它似乎什么都不做。

我已经通过每次currentDate处理程序运行时将setInterval() var递增1秒来解决该问题。我还清理了一下你的代码。

这是未经测试的，但假设您的日期计算是正确的，这应该产生所需的输出：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<?php

    date_default_timezone_set('America/Los_Angeles');
    $rawDateStart = date('F j, Y H:i:s', date_timestamp_get(DateTime::createFromFormat('F j, Y H:i:s', 'January 7, 2016 07:00:00')));
    $rawDateCurrent = date('F j, Y H:i:s');
?>

<script>
    var printSeconds, printMinutes, printHoursDaily, printHoursWeekly, printDays;

    // Get strating and current date
    var startDate = new Date("<? echo $rawDateStart; ?>");
    var currentDate = new Date("<? echo $rawDateCurrent; ?>");

    $(function(){    

        function calculateTime()
        {
            // Increment current time
            currentDate.setSeconds(currentDate.getSeconds() + 1);

            // Calcualte time passed since the start
            var timePassed = currentDate.getTime() - startDate.getTime();
            var secondsSinceStart = Math.floor(timePassed / 1000 );
            var minutesSinceStart = Math.floor(secondsSinceStart / 60);
            var hoursSinceStart = Math.floor(minutesSinceStart / 60);
            var daysSinceStart = Math.floor(hoursSinceStart / 24);

            // Calculate time since last daily (18h) reset
            var dailySecondsElapsed = secondsSinceStart % 60;
            var dailyMinutesElapsed = minutesSinceStart % 60;
            var dailyHoursElapsed = hoursSinceStart % 18;

            // Calculate time since last weekly (7d) reset
            var weeklyHoursElapsed = hoursSinceStart % 24;
            var weeklyDaysElapsed = daysSinceStart % 7;

            // Calculate remaining time until next daily (18h) reset
            var remainingSeconds = 59 - dailySecondsElapsed;
            var remainingMinutes = 59 - dailyMinutesElapsed;
            var remainingHoursDaily = 17 - dailyHoursElapsed;

            // Calculate remaining time until next weekly (7d) reset
            var remainingHoursWeekly = 23 - weeklyHoursElapsed;
            var remainingDays = 6 - weeklyDaysElapsed;

            // If any of the variables is only a single digit number, then add 0 before
            printSeconds = (remainingSeconds > 9) ? remainingSeconds : '0' + remainingSeconds;
            printMinutes = (remainingMinutes > 9) ? remainingMinutes : '0' + remainingMinutes;
            printHoursDaily = (remainingHoursDaily > 9) ? remainingHoursDaily : '0' + remainingHoursDaily;
            printHoursWeekly = (remainingHoursWeekly > 9) ? remainingHoursWeekly : '0' + remainingHoursWeekly;
            printDays = (remainingDays > 9) ? remainingDays : '0' + remainingDays;
        }

        setInterval(function() {
            calculateTime();

            // Print
            jQuery('#daily p').html(printHoursDaily+':'+printMinutes+':'+printSeconds)
            jQuery('#weekly p').html(printDays+':'+printHoursWeekly+':'+printMinutes+':'+printSeconds)
        }, 1000);
    });
</script>

<div id="daily"><p ></p></div>
<div id="weekly"><p ></p></div>

</body>
</html>

具有特定开始日期的每18小时定期倒数计时器

1 个答案: