您的位置：首页 > Web前端 > JQuery

jquery倒计时实现

2015-10-28 09:10 567 查看

在项目中，一般给用户发送完短信后，希望发送按钮能够过60秒后才能再次点击。实现效果图如下：

需要在页面中引入jquery，实现源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="target-densitydpi=device-dpi, width=640px, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<style type="text/css">
.w-btn-mark-disable, .w-btn-mark-disable:hover, .w-btn-mark-disable:active{ background-color: #bbbbbb; cursor: default; border-color:#bbb;}

</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>

<input type="button" id ="btnSendCode" value = "发送验证码.." onclick="sendMessage()" />
<span id="sendFlag"></span>

<script type="text/javascript">

/*-------------------------------------------*/
var InterValObj; //timer变量，控制时间
var count = 3; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
//设置button效果，开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").addClass("w-btn-mark-disable");
$("#btnSendCode").val("在" + curCount + "秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

//通过ajax异步调用发送短信接口，来判断是否发送成功
$("#sendFlag").html("发送成功");

/*   $.ajax({
url:"${rootpath}/reSend.html", //后台处理程序
type:'post',         //数据发送方式
dataType: 'text',
data:{userId:userId},
async: true,
success:function(data){
if(data==0){
$("#sendFlag").html("发送成功");
}else{
$("#sendFlag").html("发送失败");
}
}
}); */

}
//timer 处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").removeClass("w-btn-mark-disable");
$("#btnSendCode").val("重新发送验证码");
$("#sendFlag").html("");
}
else {
curCount--;
$("#btnSendCode").val("在" + curCount + "秒内输入验证码");
}
}

</script>
</body>
</html>

文件打包下载地址：http://download.csdn.net/download/zl544434558/9219175

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery-倒计时

相关文章推荐

新的分享

章节导航