倒计时效果

最新推荐文章于 2022-08-18 17:52:27 发布

Kaaaakaki

最新推荐文章于 2022-08-18 17:52:27 发布

阅读量110

点赞数

分类专栏：分布式电商

本文链接：https://blog.csdn.net/Kaaaakaki/article/details/118800623

版权

分布式电商专栏收录该内容

54 篇文章 1 订阅

订阅专栏

本文介绍了如何在前端实现点击按钮发送验证码的功能，并结合JavaScript实现60秒倒计时重置按钮的效果。通过监听按钮点击事件，首先触发验证码发送，然后切换按钮样式并启动倒计时。倒计时过程中按钮不可点击，当倒计时结束，按钮恢复初始状态，允许再次发送验证码。

摘要由CSDN通过智能技术生成

	$(function(){
			    $("#sendCode").click(function () {
					//1. 给指定手机发送验证码
					// 2 倒计时效果
					if($(this).hasClass("disabled")){
					    //正在倒计时  点击没反应
					}else{
                        timeoutchangeStyle()
					}

                });
			})
			var num = 60;
			function timeoutchangeStyle(){
                $("#sendCode").attr("class","disabled");
			    if(num ==0){
			        $("#sendCode").text("点击发送验证码");
                    $("#sendCode").attr("class","");
					num=60;
				}else{
                    $("#sendCode").text(num+"s后重新发送");

			        setTimeout("timeoutchangeStyle()",1000)
				}
                num--;
			}