PHP JavaScript 倒数计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6712108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PHP JavaScript Countdown Timer
提问by Dustin
I need to make a countdown timer that displays a specific number of minutes and seconds counting down - not a countdown to a certain date.
我需要制作一个倒数计时器，显示特定的分钟数和秒数倒计时 - 而不是某个日期的倒计时。
And depending on a variable, change these numbers.
并根据变量更改这些数字。
So for $video == 1, I need to display on the page: 8 minutes & 54 seconds(counting down)
所以对于$video == 1，我需要在页面上显示：（8 minutes & 54 seconds倒计时）
And for $video == 2, I need to display on the page: 5 minutes & 01 seconds(counting down)
而对于$video == 2，我需要在页面上显示：（5 minutes & 01 seconds倒计时）
I also need the countdown display to disappear after the time has elapsed, but maybe I should put that into a different question.
我还需要倒计时显示在时间过去后消失，但也许我应该把它放到一个不同的问题中。
The problem I'm having is the all the countdown scripts I can find deal with counting down to a specific date.
我遇到的问题是我可以找到处理倒计时到特定日期的所有倒计时脚本。
回答by brady.vitrano
Everything you need, just enter the total time in seconds in the <span>tags. 30and 120here for demo. Should work if you copy and paste directly into a webpage. Add and edit code as needed.
您需要的一切，只需在<span>标签中输入总时间（以秒为单位）。30和120这里的演示。如果您直接复制并粘贴到网页中，则应该可以使用。根据需要添加和编辑代码。
<span id="countdown-1">30 seconds</span>
<span id="countdown-2">120 seconds</span>
<script type="text/javascript">
// Initialize clock countdowns by using the total seconds in the elements tag
secs = parseInt(document.getElementById('countdown-1').innerHTML,10);
setTimeout("countdown('countdown-1',"+secs+")", 1000);
secs = parseInt(document.getElementById('countdown-2').innerHTML,10);
setTimeout("countdown('countdown-2',"+secs+")", 1000);
/**
* Countdown function
* Clock count downs to 0:00 then hides the element holding the clock
* @param id Element ID of clock placeholder
* @param timer Total seconds to display clock
*/
function countdown(id, timer){
timer--;
minRemain = Math.floor(timer / 60);
secsRemain = new String(timer - (minRemain * 60));
// Pad the string with leading 0 if less than 2 chars long
if (secsRemain.length < 2) {
secsRemain = '0' + secsRemain;
}
// String format the remaining time
clock = minRemain + ":" + secsRemain;
document.getElementById(id).innerHTML = clock;
if ( timer > 0 ) {
// Time still remains, call this function again in 1 sec
setTimeout("countdown('" + id + "'," + timer + ")", 1000);
} else {
// Time is out! Hide the countdown
document.getElementById(id).style.display = 'none';
}
}
</script>
回答by sdolgy
<?php
$countDownTime = 0;
if ($video == 1) $countDownTime = (8*60 + 54);
else if ($video == 2) $countDownTime = (5*60 + 1);
echo '<script>var countdownTime="' . $countDownTime . '";</script>"';
?>
<script>
<!-- as per the hyper linked reference below -->
$(selector).countdown({until: countdownTime});
</script>
Using the following library, you can implement a JQuery timer using the var countdownTimeyou specify above...
使用以下库，您可以使用countdownTime上面指定的 var 实现 JQuery 计时器...
http://keith-wood.name/countdown.html<-- tutorial on the first page!
http://keith-wood.name/countdown.html<--第一页教程！
EditReplaced $someTimeInSeconds with $countDownTime
编辑用 $countDownTime 替换 $someTimeInSeconds
回答by Ram
Try:
尝试：
var x, secs = 600; //declared globally
x = setInterval(myFunc, 1000);
function myFunc()
{
document.getElementById('timer').innerHTML = secs; //assuming there is a label with id 'timer'
secs --;
if(secs == 0)
{
document.getElementById('timer').style.hidden = true;
clearInterval(x);
}
}
回答by Joseph Szymborski
There is a countdown script located at http://javascript.internet.com/time-date/countdown-timer.htmlthat doesn't countdown to a date but rather a specified amount of minutes.
有一个位于http://javascript.internet.com/time-date/countdown-timer.html的倒计时脚本，它不会倒计时到日期，而是指定的分钟数。
The code may be customized as follows to get the desired effect
可以自定义如下代码以获得想要的效果
<?php
if ($video===1){
$time="8:54";
}
if ($video===2){
$time="5:01";
}
?>
<script type="text/javascript" src="countDown.js"></script>
<form name="cd">
<input id="txt" readonly="true" type="text" value="<?php echo $time; ?>" border="0" name="disp">
</form>
Make sure that the contents of countDown.js looks like this:
确保 countDown.js 的内容如下所示：
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php */
var mins
var secs;
function cd() {
mins = 1 * m("10"); // change minutes here
secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
redo();
}
function m(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(0, i));
}
function s(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(i + 1, obj.length));
}
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if(secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return(disp);
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
document.cd.disp.value = dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
window.onload = init;
回答by myth024
Ok, I'm looking at doing something similar. Currently I have a simple countdown timer that is based off of current time that counts down every 30min. The problem is that I have to use a meta refresh to update it. I'm wondering if a combination of javascript and PHP might be a simpler solution to this answer. Use javascript to call the php code and automatically update it? Maybe set a variable for the time in the php script to be called with javascript? Well, here's the code I have that might help. I'm still learning.
好的，我正在考虑做类似的事情。目前我有一个简单的倒数计时器，它基于每 30 分钟倒计时的当前时间。问题是我必须使用元刷新来更新它。我想知道 javascript 和 PHP 的组合是否可能是这个答案的更简单的解决方案。使用javascript调用php代码并自动更新？也许在 php 脚本中为时间设置一个变量以使用 javascript 调用？好吧，这是我拥有的可能会有所帮助的代码。我还在学习。
$minutes_left = ($minutes)?((30 - $minutes)-(($seconds)?1:0)):0;
$minutes_left = str_pad ($minutes_left , 2, '0', STR_PAD_LEFT);
$seconds_left = ($seconds)?(60 - $seconds):0;
$seconds_left = str_pad ($seconds_left , 2, '0', STR_PAD_LEFT);
echo '<center><h1 style="font-color:white;">Next station break in: '.$minutes_left.'m '.$seconds_left.'s</h2></center>';
?>
I just have to figure out how to get it to reset itself at the end of every 30min and to update without meta refresh.
我只需要弄清楚如何让它在每 30 分钟结束时自行重置并在没有元刷新的情况下进行更新。
