- 如何制作jQuery倒计时?

  显示原文与译文双语对照的内容
89 4

我想要一个jQuery倒计时:

  • 在页面下载完成后开始计数
  • 在数 0之后,它重定向到一个 url

我要怎么才能做到?

时间:原作者:0个回答

100 3

我以为我会把这个打破一点,提供一些倒计时和重定向的东西。毕竟,你可能希望在明天的时候对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";
}
原作者:
78 2

我已经使用 JQUERY 。CSS和HTML创建了一个倒计时脚本。这是我的完整源代码。演示链接也可用。

的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

我希望这段代码对你有帮助。

原作者:
147 3

你确定要将Javascript用于?你可能只需要使用普通 HTML:

<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/">

将它放在 header 中,而且转发甚至可以在没有启用Javascript的浏览器上工作。

原作者:
...