javascript - 每 18 小时循环倒数计时器，并具有特定的开始日期

标签 javascript php jquery date countdown

我有一个专门针对某个游戏的小粉丝网站。现在，在该游戏中，有两个实时事件会在一段时间后重置。第一个每 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>

样式.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 小时重新启动一次。因此，当我查看此页面时，我得到的时间是根据开始日期和当前日期计算的，但来 self 的时区，而不是来自服务器的时区。

我在这里寻找的是开始日期和当前日期是从服务器而不是客户端使用的。现在，我知道 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>

所以我陷入困境，不知道如何继续。欢迎任何指点。老实说，我在时间/日期方面遇到了困难。

最佳答案

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

我通过每次 setInterval() 处理程序运行时将 currentDate 变量增加 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>

关于javascript - 每 18 小时循环倒数计时器，并具有特定的开始日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34781101/

上一篇：javascript - 表内的 Jquery 事件委托(delegate)

下一篇：javascript - 嵌套指令中的动态模型绑定(bind)适用于输入值，但不适用于选择

相关文章：

javascript - ReactJS: "TypeError: Object(...)(...) is undefined"

javascript - 数组未传递给 knex 中的查询

javascript - Antd提示框悬停后如何消失？

javascript - PHP:在有限的时间后自动点击提交按钮

php - 匿名递归 PHP 函数

jquery - jquery中的MVC字符串编码问题

javascript - ruby 代码片段中的 Coffesscript 变量

Javascript - 为每个数组值设置间隔。设置间隔，数组，foreach

javascript - 在水平列表上用鼠标滚轮水平滚动

javascript - 无法在具有相同类名的多个元素中定位单个输入(jQuery)

©2024 IT工具网  联系我们