[英]How to set a countdown when user clicks on a link?
我遇到了一个场景,在该场景中,用户单击链接后需要倒数计时,尽管在此之前必须看到数字“ 10”(十秒倒数)。 链接本身还会打开另一个页面。 倒计时最后不应该做任何事情,仅仅是装饰。 我如何做到这一点?
<div id="gatewayDimmer"> </div>
<div id="gatewaydiv">
<ul id="OfferList">
<h1>Ayudanos a mantener la Página</h1>
<span id="gatewayMessage">Hicimos esta página de onda. Y no se mantiene sola! Ayudanos clickeando en la publicidad.</span> <br />
<br />
<li><a href="http://www.wachahost.com" class="offerlink" target="blank">Cheap Web Hosting</a></li>
<li><a href="http://peerfly.com/x/0/1076/3696/" class="offerlink" target="blank">Free Apple Ipad</a></li>
<li><a href="http://www.google.com" class="offerlink" target="blank">Google</a></li>
</ul>
<br />
<br />
Luego de completar la oferta espera: <span id="count">10</span> segundos <script type="text/javascript">
{
(function countDown(){
var counter = 10;
setInterval(function countDown() {
counter--;
if (counter >= 0) {
span = document.getElementById("count");
span.innerHTML = counter;
}
// Display 'counter' wherever you want to display it.
if (counter === 0) {
// alert('this is where it happens');
clearInterval(counter);
}
}, 1000);
})();
}
</script> para acceder a la página.<br />
Gracias!</div>
消息脚本:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript">
var Delay = 10;
function setupgateway()
{
var Left = $(window).width() /2;
Left = Left - $('#gatewaydiv').width()/2;
var Top = $(window).height() /2;
Top = Top - $('#gatewaydiv').height()/2;
$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
}
function removegateway()
{
$('#gatewaydiv').css('display', 'none');
$('#gatewayDimmer').css('display','none');
}
$(document).ready(function()
{
$('.offerlink').click(function()
{
setTimeout('removegateway()', Delay*1000);
});
setupgateway();
});
</script>
尝试使用jquery函数:
jQuery(function($){
$('#startClock').on('click', doCount);
});
function doCount(){
var counter = 5;
setInterval(function() {
counter--;
if (counter >= 0) {
span = document.getElementById("count");
span.innerHTML = counter;
}
if (counter === 0) {
alert('sorry, out of time');
clearInterval(counter);
}
}, 1000);
}
演示小提琴: http : //jsfiddle.net/6nDYd/12/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.