212、商城业务-认证服务-好玩的验证码倒计时

最新推荐文章于 2022-05-31 17:16:14 发布

原创最新推荐文章于 2022-05-31 17:16:14 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

谷粒商城专栏收录该内容

261 篇文章

订阅专栏

本文介绍了一个基于GuliMall平台的登录与注册页面实现方式，包括使用@Controller注解创建登录控制器，通过@GetMapping映射登录与注册页面请求，以及利用jQuery实现验证码发送功能，展示了页面跳转与倒计时功能的具体代码。

跳转http://gulimall.com/

@Controller
public class LoginController {

    @GetMapping("login.html")
    public String loginPage(){

        return "login";
    }

    @GetMapping("reg.html")
    public String regPage(){

        return "reg";
    }
}

$(function(){
				$("#sendCode").click(function(){

					// 2、倒计时
					if($(this).hasClass("disabled")){
						// 正在倒计时
					}else{
						// 1、给指定手机号发送验证码
						timeoutChangeStyle();
					}
				});
			});

			var num = 10;
			function timeoutChangeStyle(){
				$("#sendCode").attr("class", "disabled");
				if(num == 0){
					$("#sendCode").text("发送验证码");
					num = 10;
					$("#sendCode").attr("class", "");
				}else{
					var str = num + "s后再次发送";
					$("#sendCode").text(str);
					setTimeout("timeoutChangeStyle()", 1000);
				}
				num--;
			}