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

使用javascript实现邮件发送按钮60秒倒计

2016-05-22 17:54 537 查看
在很多web项目中，都需要使用到邮件验证，为了防止用户反复提交发送邮件请求。需要限制用户点击发送邮件按钮次数，同时发送邮件请求应使用AJAX异步请求完成。

以下是使按钮60秒内不可用的js代码：

 var countdown = 60;
        function settime(obj) {
            if (countdown == 0) {
                obj.removeAttribute("disabled");
                obj.value = "免费获取验证码";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value = "重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function () {
                settime(obj)
            },1000)
        }









因为需要执行发送邮件请求，所以此项单独写成方法，在使用发送邮件请求的方法中调用。

<span style="font-size:14px;"> function sendmail(obj) {
var mailaddress = document.getElementById("text4").value;
if (mailaddress == "") {
alert("请输入正确的邮箱")
return false;
}
else {
ajax("../sendmail.ashx?mailaddress=" + mailaddress, function (resText) {
if (resText == "fail") {
alert("邮件发送失败！请重试！");
}
else if (resText == "success") {
alert("发送成功！")
document.getElementById("chexknumdiv").style.display = "";
var wait = 60;
time(obj,wait);
}
})
}
}</span>

发送按钮的代码为：

<span style="font-size:14px;"><input id="send" type ="button" name="sm" value="获取验证码" onclick="sendmail(this)"  /></span>
这样就实现了。

效果图：

点击发送验证码。。。。。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                web前端
                                                ajax
                                                javascript
                                                倒计时
                                                邮件
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航