我想知道如何在屏幕上设置倒数计时器,当它达到零时,它会删除特定的 DIV。
基本上我正在设计一个一次性报价的报价页面,他们必须在一个时间范围内响应它,否则它将永远消失。
我有一个名为#offer-wrapper 的div 和一个名为#offer-timer 的div。第二个 div 中的计时器应该导致第一个 div 从页面中删除。
可以从获取 HTML/JS 倒计时脚本开始,但从那里我迷路了,请指教谢谢 :)
编辑。如果可能的话,还有什么可以阻止用户刷新页面?
$(document).ready(function() {
jQuery.fn.countDown = function(settings, to) {
settings = jQuery.extend({
startFontSize : '40px',
endFontSize : '12px',
duration : 1000,
startNumber : 10,
endNumber : 0,
callBack : function() {
}
}, settings);
return this.each(function() {
if (!to && to != settings.endNumber) {
to = settings.startNumber;
}
// Set the countdown to the starting number
$(this).text(to).css('fontSize', settings.startFontSize);
// Loopage
$(this).animate({
'fontSize' : settings.endFontSize
}, settings.duration, '', function() {
if (to > settings.endNumber + 1) {
$(this).css('fontSize', settings.startFontSize).text(to - 1).countDown(settings, to - 1);
} else {
settings.callBack(this);
}
});
});
};
$('#countdown').countDown({
startNumber : 100,
callBack : function(me) {
$('#countdown').remove();
alert("TIME IS OVER!!");
}
});
});
您可以使用 window.setInterval 和一个简单的函数来更新全局变量,然后使用 jQuery 的 .remove() 函数(或者甚至只是将 CSS 设置为 display:none)来执行此操作
var time = 60;
window.setInterval(test, 1000);
function test()
{
//update time
time -=1;
//update the div to show the time
$('#testDiv').html(time);
//hide the div if the time is 0
if(time == 0)
{
$('#testDiv').remove();
}
}
jsFiddle = http://jsfiddle.net/9sAce/ </p>