当前位置： 文江博客话题详情

每隔一个星期二的 Javascript 倒计时器

发布于 2024-10-31 15:56:06 字数 225 浏览 0 评论 0原文

我运营该网站的一个广播节目，每隔一个星期二早上 6 点到 7 点播出。 我正在尝试编写一个 Javascript 来倒计时我们的节目直播之前的天、小时、分钟和秒。

然后，当我们的节目直播时，我想使用 PHP 将倒计时器替换为图像。一小时后，早上7点，我们的演出结束了；然后我想让 PHP 脚本返回倒计时器。

我尝试搜索自动更新的倒计时脚本，但到目前为止还没有找到任何东西。
我将如何制作这些脚本？

原文

I run the site for a radio show that airs every other Tuesday from 6 to 7am.
I'm trying to make a Javascript that will countdown the days, hours, minutes, and seconds till our show is live.

Then, when our show is live, I'd like to replace the countdown timer with an image using PHP. One hour later at 7am, our show is over; then I'd like the PHP script to return to the countdown timer.

I've tried to search around for countdown scripts that auto-update, but haven't found anything so far.
How would I make these scripts?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

何必那么矫情 2024-11-07 15:56:06

大约几个小时前，我完成了一个 JavaScript 计时器的开发。
它应该可以解决问题。

function miniTimer(s,callback,opt){ 
function getParam(value,defaultValue){
    return typeof value == 'undefined' ? defaultValue : value;
}
this.s = getParam(s,0);
this.callback = getParam(callback,null);// a callback function that takes the current time in seconds as the first parameter and the formated time as the second
var opt = getParam(opt,{});
this.settings = {
    masterCallback : getParam(opt.masterCallback,null),// same as above, but this one is called when the miniTimer finishes it's work (if maxPaceDuration or limitValue is set)
    autoplay : getParam(opt.autoplay,false),
    limitValue : getParam(opt.limitValue,null),
    maxPaceCount : getParam(opt.maxPaceCount,null),
    paceDuration : getParam(opt.paceDuration,1000),//milisec,
    paceValue : getParam(opt.paceValue,1)//increment with only one second; set to -1 to countdown
};
this.interval = 0; 
this.paceCount = 0;
if(this.settings.autoplay)
    this.start();
return this;
} 
 miniTimer.prototype = { 
toString : function(){
    var d = Math.floor(this.s / (24 * 3600)); 
    var h = Math.floor((this.s - d* 24 * 3600) / 3600); 
    var m = Math.floor((this.s - d* 24 * 3600 - h * 3600) / 60); 
    var s = this.s % 60; 
    if(h <= 9 && h >= 0) 
        h = "0"+h; 
    if(m <= 9 && m >= 0) 
        m = "0"+m; 
    if(s <= 9 && s >= 0) 
        s = "0"+s; 
    var day = d != 1 ? "days" : "day";
    return d+" "+day+" "+h+":"+m+":"+s;
}, 
nextPace : function(){ 
    if((this.settings.maxPaceCount != null && this.settings.maxPaceCount <= this.paceCount) 
        || (this.settings.limitValue != null && this.settings.limitValue == this.s))
        {
            this.stop();
            if(this.settings.masterCallback != null)
                this.settings.masterCallback(this.s,this.toString());
            return;
        }
    this.paceCount++;
    var aux =  this.s + this.settings.paceValue;
    this.s += this.settings.paceValue;
    if(this.callback != null) 
        this.callback(this.s,this.toString()); 
    return this;
},
start : function(){ 
    var $this = this;
    this.interval = setInterval(function(){$this.nextPace();},this.settings.paceDuration); 
    return this;
},
stop : function(){
    clearInterval(this.interval); 
    return this;
}
}

现在您所要做的就是配置正确的回调函数：

 var el = document.getElementById('timer');
function getNextTuesday(){
    var nextTuesday  = new Date();
    var t = nextTuesday.getDay();
    t = t > 2 ? 9 - t :  2 - t;
    nextTuesday.setDate(nextTuesday.getDate() + t);
    return nextTuesday;
}
var showDuration = 2 * 60 * 60;//2h
var t = new miniTimer(Math.floor((getNextTuesday() - new Date())/1000),function(date,string){
    if(date > 0)
        el.innerHTML = string;
    else
        {
            if(date <= -showDuration)
                t.s = Math.floor((getNextTuesday() - new Date())/1000);
            el.innerHTML = "<img src='http://t2.gstatic.com/images?q=tbn:ANd9GcT3CEVtaAYQJ4ALZRmgMHsCA8CG5tdpauLqSMhB66HJP_A0EDPPXw'>";
        }
},{autoplay:true,paceValue : -1});

这是一个工作示例：http://jsfiddle.网/gion_13/8wxLP/1/

About a few hours ago i finished developing a javascript timer.
It should do the trick.

function miniTimer(s,callback,opt){ 
function getParam(value,defaultValue){
    return typeof value == 'undefined' ? defaultValue : value;
}
this.s = getParam(s,0);
this.callback = getParam(callback,null);// a callback function that takes the current time in seconds as the first parameter and the formated time as the second
var opt = getParam(opt,{});
this.settings = {
    masterCallback : getParam(opt.masterCallback,null),// same as above, but this one is called when the miniTimer finishes it's work (if maxPaceDuration or limitValue is set)
    autoplay : getParam(opt.autoplay,false),
    limitValue : getParam(opt.limitValue,null),
    maxPaceCount : getParam(opt.maxPaceCount,null),
    paceDuration : getParam(opt.paceDuration,1000),//milisec,
    paceValue : getParam(opt.paceValue,1)//increment with only one second; set to -1 to countdown
};
this.interval = 0; 
this.paceCount = 0;
if(this.settings.autoplay)
    this.start();
return this;
} 
 miniTimer.prototype = { 
toString : function(){
    var d = Math.floor(this.s / (24 * 3600)); 
    var h = Math.floor((this.s - d* 24 * 3600) / 3600); 
    var m = Math.floor((this.s - d* 24 * 3600 - h * 3600) / 60); 
    var s = this.s % 60; 
    if(h <= 9 && h >= 0) 
        h = "0"+h; 
    if(m <= 9 && m >= 0) 
        m = "0"+m; 
    if(s <= 9 && s >= 0) 
        s = "0"+s; 
    var day = d != 1 ? "days" : "day";
    return d+" "+day+" "+h+":"+m+":"+s;
}, 
nextPace : function(){ 
    if((this.settings.maxPaceCount != null && this.settings.maxPaceCount <= this.paceCount) 
        || (this.settings.limitValue != null && this.settings.limitValue == this.s))
        {
            this.stop();
            if(this.settings.masterCallback != null)
                this.settings.masterCallback(this.s,this.toString());
            return;
        }
    this.paceCount++;
    var aux =  this.s + this.settings.paceValue;
    this.s += this.settings.paceValue;
    if(this.callback != null) 
        this.callback(this.s,this.toString()); 
    return this;
},
start : function(){ 
    var $this = this;
    this.interval = setInterval(function(){$this.nextPace();},this.settings.paceDuration); 
    return this;
},
stop : function(){
    clearInterval(this.interval); 
    return this;
}
}

Now all you have to do is configure the proper callback function:

 var el = document.getElementById('timer');
function getNextTuesday(){
    var nextTuesday  = new Date();
    var t = nextTuesday.getDay();
    t = t > 2 ? 9 - t :  2 - t;
    nextTuesday.setDate(nextTuesday.getDate() + t);
    return nextTuesday;
}
var showDuration = 2 * 60 * 60;//2h
var t = new miniTimer(Math.floor((getNextTuesday() - new Date())/1000),function(date,string){
    if(date > 0)
        el.innerHTML = string;
    else
        {
            if(date <= -showDuration)
                t.s = Math.floor((getNextTuesday() - new Date())/1000);
            el.innerHTML = "<img src='http://t2.gstatic.com/images?q=tbn:ANd9GcT3CEVtaAYQJ4ALZRmgMHsCA8CG5tdpauLqSMhB66HJP_A0EDPPXw'>";
        }
},{autoplay:true,paceValue : -1});

here's a working example : http://jsfiddle.net/gion_13/8wxLP/1/

回复 原文
暮倦 2024-11-07 15:56:06

您需要找到节目播出的第一个星期二上午 7 点的 GMT 时间，
并在客户端使用 new Date 将其转换为用户本地时间。
一旦你这样做了，就像任何其他倒计时一样。

此示例假设首场演出在美国东部时间 (EDT) 和 4 月 5 日举行。
(日期.UTC(2011,3,5,11))

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>

<script>
function counttoShow(){
    var A= [], x, d,  diff,cd=document.getElementById('countdown'),
    cdimg=document.getElementById('onAir'),
    onair= new Date(Date.UTC(2011, 3, 5, 11)), now= new Date();
    while(onair<now) onair.setDate(onair.getDate()+14);
    diff= (onair-now);
    if(diff<3600000){
        cdimg.style.visibility='visible';
        cd.style.visibility='hidden';
    }
    else{
        x= Math.abs(diff-3600000);
        d= Math.floor(x/86400000);
        if(d> 1){
            A.push( d + " days");
            x%= 86400000;
        }
        x= Math.floor(x/1000);
        if(x> 3600){
            d= Math.floor(x/3600);
            A.push(d + " hour" +(d> 1? "s": ""));
            x%= 3600;
        }
        if(x> 60){
            d= Math.floor(x/60);
            A.push(d + " minute" +(d> 1? "s": ""));
            x%= 60;
        }
        if(x> 0) A.push(x + " second" +(x> 1? "s": ""));
        cdimg.style.visibility='hidden';
        cd.value= A.join(", ");

    }
}
window.onload=function(){
    var cdtimer=setInterval(counttoShow,1000);
    document.body.ondblclick=function(){
        if(cd.timer){
            clearInterval(cdtimer);
            cdtimer=null;
        }
        else cdtimer=setInterval(counttoShow,1000); 
    }
}
</script>
</head>
<body>
<h1>Radio Show</h1>
<p><img id="onAir" src="onair.gif"> 
<input id="countdown" type="text" size="40" readOnly style="border:none"> until show time.
</p>
</div>
</body>
</html>

You'll need to find the GMT time for 7am on the first tuesday the show is on,
and use new Date on the client to convert it to the user's local time.
Once you do that, it is like any other count down.

This example assumes EDT and April 5 for the first show.
(Date.UTC(2011, 3, 5, 11))

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>

<script>
function counttoShow(){
    var A= [], x, d,  diff,cd=document.getElementById('countdown'),
    cdimg=document.getElementById('onAir'),
    onair= new Date(Date.UTC(2011, 3, 5, 11)), now= new Date();
    while(onair<now) onair.setDate(onair.getDate()+14);
    diff= (onair-now);
    if(diff<3600000){
        cdimg.style.visibility='visible';
        cd.style.visibility='hidden';
    }
    else{
        x= Math.abs(diff-3600000);
        d= Math.floor(x/86400000);
        if(d> 1){
            A.push( d + " days");
            x%= 86400000;
        }
        x= Math.floor(x/1000);
        if(x> 3600){
            d= Math.floor(x/3600);
            A.push(d + " hour" +(d> 1? "s": ""));
            x%= 3600;
        }
        if(x> 60){
            d= Math.floor(x/60);
            A.push(d + " minute" +(d> 1? "s": ""));
            x%= 60;
        }
        if(x> 0) A.push(x + " second" +(x> 1? "s": ""));
        cdimg.style.visibility='hidden';
        cd.value= A.join(", ");

    }
}
window.onload=function(){
    var cdtimer=setInterval(counttoShow,1000);
    document.body.ondblclick=function(){
        if(cd.timer){
            clearInterval(cdtimer);
            cdtimer=null;
        }
        else cdtimer=setInterval(counttoShow,1000); 
    }
}
</script>
</head>
<body>
<h1>Radio Show</h1>
<p><img id="onAir" src="onair.gif"> 
<input id="countdown" type="text" size="40" readOnly style="border:none"> until show time.
</p>
</div>
</body>
</html>
回复 原文
原谅过去的我 2024-11-07 15:56:06

这将为您提供距离下一场演出还有多少秒（假设您的下一场演出是明天）。然后你需要从那里找到时间。

var now = new Date(),
    then = new Date( 2011, 3, 9 ),
    diff = new Date();

diff.setTime( Math.abs( then.getTime() - now.getTime() ) );
diff.getTime();

例如，从那时起，您可以设置每秒运行一次的超时，以将显示的秒数减少 1。

setTimeout( reduceSeconds );

This will get you the number of seconds until your next show (assuming your next show is tomorrow). Then you need to find the time from there.

var now = new Date(),
    then = new Date( 2011, 3, 9 ),
    diff = new Date();

diff.setTime( Math.abs( then.getTime() - now.getTime() ) );
diff.getTime();

From that point, you can set a timeout to run every second to recude the number of seconds displayed by 1, for example.

setTimeout( reduceSeconds );
回复 原文
~没有更多了~

关于作者

饮惑

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文