我如何做一个jQuery倒计时
我想要一个jQuery倒计时：
- 它在页面下载完成后开始计数
- 计数到0后，redirect到一个URL
我怎样才能做到这一点？
我想我会打破这一点，并提供倒计时和redirect的东西。 毕竟，你可能想要明天倒计时和操纵DOM。 因此，我想出了以下jQuery插件，你可以使用和研究：
// Our countdown plugin takes a callback, a duration, and an optional message $.fn.countdown = function (callback, duration, message) { // If no message is provided, we use an empty string message = message || ""; // Get reference to container, and set initial content var container = $(this[0]).html(duration + message); // Get reference to the interval doing the countdown var countdown = setInterval(function () { // If seconds remain if (--duration) { // Update our container's message container.html(duration + message); // Otherwise } else { // Clear the countdown interval clearInterval(countdown); // And fire the callback passing our container as `this` callback.call(container); } // Run interval every 1000ms (1 second) }, 1000); }; // Use p.countdown as container, pass redirect, duration, and optional message $(".countdown").countdown(redirect, 5, "s remaining"); // Function to be called after 5 seconds function redirect () { this.html("Done counting, redirecting."); window.location = "http://msdn.microsoft.com"; } 我已经使用JQUERY，CSS和HTML创build了一个倒计时脚本。 这是我的完整的源代码。 演示链接也可用。
CSS部分：
<style type="text/css"> body{ font-family: verdana; font-size:12px; } a{text-decoration: none;color:blue;font-weight: bold;} a:hover{color: gray;font-weight: bold;} div#my-timer{width: 400px;background: lightblue; margin: 0 auto;text-align: center;padding:5px 0px 5px 0px;} </style>
Jquery部分：
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> var settimmer = 0; $(function(){ window.setInterval(function() { var timeCounter = $("b[id=show-time]").html(); var updateTime = eval(timeCounter)- eval(1); $("b[id=show-time]").html(updateTime); if(updateTime == 0){ window.location = ("redirect.php"); } }, 1000); }); </script>
HTML部分：
<div id="my-timer"> Page Will Redirect with in <b id="show-time">10</b> seconds </div>
演示链接： http : //demos.coolajax.net/php/redirect
我希望这个代码对你有帮助。
你确定，你想用这个Javascript吗？ 你可能只是用纯HTML：
<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/">
把它放在标题中，转发器甚至可以在没有启用Javascript的浏览器上运行。
以乔纳森·桑普森（Jonathan Sampson）为例， 这是jsfiddle链接。 http://jsfiddle.net/njELV/1/
jQuery的：
var countdown = { startInterval : function() { var count = 1800; // 30 minute timeout var currentId = setInterval(function(){ $('#currentSeconds').html(count); if(count == 30) { // when there's thirty seconds... $('#expireDiv').slideDown().click(function() { clearInterval(countdown.intervalId); $('#expireDiv').slideUp(); window.location.reload(); //or whatever you'd like to do when someone clicks on the div (refresh your session etc). }); } if (count == 0) { window.location.href = '/logout.php'; } --count; }, 1000); countdown.intervalId = currentId; } }; countdown.startInterval(); /* Then each time an ajax call is made to fetch a page */ if(typeof countdown.oldIntervalId != 'undefined') { countdown.oldIntervalId = countdown.intervalId; clearInterval(countdown.oldIntervalId); countdown.startInterval(); $('#expireDiv').slideUp(); } else { countdown.oldIntervalId = 0; }
CSS：
#expireDiv { width: 100%; text-align: center; background-color: #63AFD0; padding: 10px; margin: 0; border: 1px solid #024A68; color: #024A68; font-weight: bold; font-size: 125%; box-shadow: -1px -1px 5px 1px #5E8C9E inset; -moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset; -webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset; display:none; cursor: pointer; }
HTML：
<div id="expireDiv"> Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds. If you want to continue, please save your work and click <u>here</u> to refresh the page. </div>
你可以使用jQuery的animationfunction
// Enter num from and to $({countNum: 8000}).animate({countNum: 0}, { duration: 8000, easing:'linear', step: function() { // What todo on every count console.log(Math.floor(this.countNum)); }, complete: function() { console.log('finished'); } });
我有没有jQuery这个简单的解决scheme：
<script> sec = 10; counter = document.getElementById('counter'); counter.innerText = sec; i = setInterval(function(){ --sec; if (sec === 1){ clearInterval(i); window.location = document.getElementById('retry').href; } counter.innerText=sec; },1000); </script>
在上面的示例中，redirectURL是从文档href链接的href属性中提取的，您可以用您想要的任何值replace。
结帐这个DEMO
在上面贴出的Himel Khan的代码示例中，我改变了
if(updateTime == 0)
至
if(updateTime <= 0)
以防万一有人在redirect后点击后退button。 否则，它将开始变成负数，永远不会重新定向。
请务必注意，您不应该在目标页面上使用此更改链接代码，否则将循环刷新。 如果您进行此更改，请仅在倒计时页面上包含脚本。
我假设有一个更好的方法来完成这个修复，所以也许别人可以添加更好的解决scheme
感谢您的代码。
这个链接有用的jQuery倒计时支持所有的语言
只是：）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.countdown.js"></script> <script type="text/javascript"> $('#mySelector').countdown({since: new Date(2010, 12-1, 25)}); </script>
你可以使用这个
<div id="counter"></div> <script type="text/javascript" src="http://yourjavascript.com/88131111995/jquery.countdown.js"></script> $(document).ready(function () { $('#counter').countdown({ until: 5, compact: true, onExpiry: function() { alert('bye!!'); } }); });
