每 18 小时具有特定开始日期的循环倒数计时器
Recurring Countdown Timer for every 18h with specific start date
我有一个专门针对某款游戏的粉丝小网站。现在在该游戏中有两个实时事件会在一段时间后重置。第一个每 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 不再倒计时,而是仅显示加载 script/page.
时的剩余时间
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
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 小时重置一次,另一个每周重置一次(在同一天的同一时间)。我一直在编写一个脚本,将其放在网站上以显示下一次事件重置的时间。我已经让它在大多数情况下都有效:
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 不再倒计时,而是仅显示加载 script/page.
时的剩余时间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
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>