首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >倒计时计时器建立在PHP和jQuery上?

倒计时计时器建立在PHP和jQuery上?
EN

Stack Overflow用户
提问于 2011-08-19 08:08:27
回答 6查看 38.2K关注 0票数 5

在花了45分钟寻找解决方案后,我似乎找不到一个简单的解决方案来使用PHP和jQuery创建倒计时计时器。我发现大多数已经构建的脚本都是纯粹基于jQuery的,这需要大量的代码,并且需要更多的参数,而且适应性非常困难。

这是我的情况;

PHP:

$countdown = date("h:i:s"); // This isn't my actual $countdown variable, just a placeholder

jQuery:

代码语言:javascript
复制
$(document).ready(function name() {
    $("#this").load( function() {  
        setTimeout("name()", 1000)
      }
    }
});

HTML:

<div id="this"><?php echo($countdown); ?></div>

我的想法是,每秒都会重新加载#this,为其内容赋予一个新值,而且由于$countdown不是静态变量,所以每次都会加载一个新值。这消除了处理会话的需要(因为基本的javascript倒计时器会在页面加载时重置,等等)。

我本以为这会起作用,直到我意识到事件绑定器.load()不会重新加载#this (我知道我很傻),所以我猜我想知道的是-有没有事件绑定器可以让这件事起作用,或者有没有办法在不使用jQuery插件的情况下获得我想要的功能(它无论如何都不完全符合我想要的)?

EN

Stack Overflow用户

发布于 2011-08-19 08:53:30

您与您的原始代码非常接近。下面是你的代码的一个修改,按照描述的那样工作,或者至少我认为--我知道它可以工作,但不确定它是否符合你的要求,他们有点不清楚。显然,如果您重新加载页面,您将不得不依赖于PHP输出的不同,以便计数器不会重置。需要注意的是,我不完全确定为什么要使用.load函数-该函数实际上只是一个AJAX调用的包装器,用于获取另一个页面的内容并将其插入到选定的div中。我相信您正在寻找的是.html()函数,它使用DOM中的可用内容更改所选div的内容,而不是发出AJAX请求。

代码语言:javascript
复制
var timer;
$(document).ready(
    name();
);
function name() {
    //clear the timer
    clearTimeout(timer);
    //reset the timer
    timer = setTimeout("name()", 1000);
    //grab the current time value in the div
    var time = $("#this").html();
    //split times
    var time_splits = time.split(":");
    //add up total seconds
    var total_time = (parseInt(time_splits[0])*60*60) + (parseInt(time_splits[1])*60) + parseInt(time_splits[2]);
    //subtract 1 second from time
    total_time -= 1;
    //turn total time back in hours, minutes, and seconds
    var hours = parseInt(total_time / 3600);
    total_time %= 3600;
    var minutes = parseInt(total_time / 60);
    var seconds = total_time % 60;
    //set new time variable
    var new_time = (hours < 10 ? "0" : "") + hours + (minutes < 10 ? ":0" : ":" ) + minutes + (seconds < 10 ? ":0" : ":" ) + seconds;
    //set html to new time
    $("#this").html(new_time);
}
票数 2
EN
查看全部 6 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7115620

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档