周期性倒计时计时器，每18小时一次，有特定的开始日期
Recurring Countdown Timer for every 18h with specific start date
我有一个专门为某款游戏开发的小型粉丝网站。现在，在这个游戏中，有两个实时事件在一段时间后重置。第一个每18h重置一次，另一个每周重置一次（在同一天的同一时间）。我一直在写一个脚本，放在网站上显示下一次事件重置的时间
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>
所以我被卡住了，没有任何想法如何继续。任何建议都是受欢迎的。老实说，我很难处理时间/日期之类的事情。
你很接近。问题是，每次运行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返回值只在循环中返回一次
- Jquery FadeIn FadeOut 只工作一次
- Javascript html每点击一次就会更改url
- 如何在chrome扩展中存储数据/结果，以及如何使用setTimeout使其只被调用一次
- Rails操作只调用一次，但我在ajax中每秒钟都调用一次
- jQuery滚动功能只工作一次
- 刷新导致我的帖子“;张贴“;再一次
- 引导程序崩溃一次只能看到一个
- 使用年、月、日期、小时、秒格式每分钟刷新一次图像
- D3 日期范围(按小时）;每 7 天重复一次
- 周期性倒计时计时器，每18小时一次，有特定的开始日期
- Bootstrap DateTimePicker:一次打开一个日期时间选取器
- 更改日期时调用函数一次
- 每周更改一次日期
- 创建一个每秒钟更新一次的日期和时间函数
- 在NodeJs中存储最后一次接收REST调用的日期/时间
- 限制名称和日期js cookie每次会话只加载一次
- 为什么这个PDF javascript日期每年只被错误地计算一次?
- Jquery自定义日期验证器只工作一次
- 只有一次点击日期选择器td工作
