Мне нужен обратный отсчет jQuery:
- Он начинает отсчет после завершения загрузки страницы.
- После подсчета до 0 он перенаправляет URL-адрес
Как я могу это сделать?
Мне нужен обратный отсчет jQuery:
Как я могу это сделать?
Я думал, что немного сломаю это и предоставит что-то, что делает обратный отсчет и перенаправление. В конце концов, вы можете захотеть обратный отсчет и манипулировать 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 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";
}
Я создал обратный отсчет script с помощью 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
Надеюсь, этот код вам поможет.
Вы уверены, что хотите использовать Javascript для этого? Вы можете просто пойти с простым HTML:
<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/">
Поместите это в заголовок, и вперед будет работать даже в браузерах без включенного Javascript.
Здесь мой пример основан на примере Джонатана Сэмпсона. Здесь ссылка 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 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 aimate
// 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:
<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>
В приведенном выше примере URL-адрес перенаправления извлекается из атрибута href
гиперссылки в документе, который вы можете заменить любым желаемым значением.
Оформить заказ DEMO
В приведенном выше примере кода Himel Khan я изменил
if(updateTime == 0)
to
if(updateTime <= 0)
на всякий случай, когда кто-то нажимает кнопку "Назад" после перенаправления. В противном случае он начнется с отрицательных чисел и никогда не будет перенаправлен.
Важно отметить, что вы не должны иметь код, связанный на целевой странице с этим изменением, или он обновит цикл. Если вы сделаете это изменение, включите только script на странице с обратным отсчетом.
Я предполагаю, что есть лучший способ выполнить это исправление, поэтому, возможно, кто-то еще может добавить лучшее решение
Спасибо за код.
эта ссылка полезная jQuery Countdown поддержка весь язык
просто:)
<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!!'); }
});
});