分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

短信验证码js效果实现(防刷新)

发布时间:2023-09-06 01:21责任编辑:苏小强关键词:js验证码
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script><script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> ?<script> ???????$(function(){ ???????????/*防刷新:检测是否存在cookie*/ ???????????if($.cookie("captcha")){ ???????????????var count = $.cookie("captcha"); ???????????????var btn = $(‘#getting‘); ???????????????btn.val(count+‘秒后可重新获取‘).attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘); ???????????????var resend = setInterval(function(){ ???????????????????count--; ???????????????????if (count > 0){ ???????????????????????btn.val(count+‘秒后可重新获取‘).attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘); ???????????????????????$.cookie("captcha", count, {path: ‘/‘, expires: (1/86400)*count}); ???????????????????}else { ???????????????????????clearInterval(resend); ???????????????????????btn.val("获取验证码").removeClass(‘disabled‘).removeAttr(‘disabled style‘); ???????????????????} ???????????????}, 1000); ???????????} ?????????????/*点击改变按钮状态,已经简略掉ajax发送短信验证的代码*/ ???????$(‘.get_code‘).click(function(){ ???????????var btn = $(this); ???????????var count = 60; ???????????var tel=$(".tel_inp").val(); ???????????var $templateId="59108"; ???????????if(tel==""){ ???????????????layer.tips("手机号不能为空", ".tel_inp", {tips:3,time:2000}); ???????????} ???????????else if(!(/^1(3|4|5|7|8)\d{9}$/).test(tel)){ ???????????????layer.tips("手机号输入不正确", ".tel_inp", {tips:3,time:2000}); ???????????} ???????????else{ ???????????????var resend = setInterval(function(){ ???????????????????count--; ???????????????????if (count > 0){ ???????????????????????btn.text(‘重新发送(‘+count+‘)‘); ???????????????????????$.cookie("captcha", count, {path: ‘/‘, expires: (1/86400)*count}); ???????????????????}else { ???????????????????????clearInterval(resend); ???????????????????????btn.text("获取动态密码").removeAttr(‘disabled style‘); ???????????????????} ???????????????}, 1000); ???????????????$.ajax({ ???????????????????url ?: "/duanxin/demo.php", ???????????????????type : ‘post‘, ???????????????????data : {‘tel‘:tel,‘templateId‘:$templateId}, ???????????????????dataType:‘text‘, ???????????????????//beforeSend:function(){}, ???????????????????success:function(data){ ???????????????????????layer.tips(data, ".tel_inp", {tips:3,time:2000}); ???????????????????} ???????????????}); ???????????????btn.attr(‘disabled‘,true).css(‘cursor‘,‘not-allowed‘); ???????????} ???????});</script> 

短信验证码js效果实现(防刷新)

原文地址:http://www.cnblogs.com/wjw-/p/7753768.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved