jquery倒计时效应插件

作者:杏彩彩票app下载

这个案例是使用jquery实现的一个比较常见的倒计时效果,现实中我们经常会在购物网站上看到某商品定时开抢或某活动开始等,基本都是这么实现的,下面首先看一下这个倒计时效果图!

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,首先来看一下这个代码的效果图:

一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下:

图片 1

图片 2

<html>
<head> 
<title>test count down button</title> 
<script src="http://www.phpernote.com/js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#btn').click(function () { 
var count = 3; 
var countdown = setInterval(CountDown, 1000); 

function CountDown() { 
$("#btn").attr("disabled", true); 
$("#btn").val("Please wait " + count + " seconds!"); 
if (count == 0) { 
$("#btn").val("Submit").removeAttr("disabled"); 
clearInterval(countdown); 
} 
count--; 
} 
}) 
}); 
</script> 
</head> 
<body> 
<input type="button" id="btn" value="Submit" /> 
</body>
</html>

本文由杏彩发布,转载请注明来源

关键词: