验证码过期(小功能)

作用：模拟获取验证码，10s后，重新获取。未过期前不可重复获取；

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%//获取随机短信  --不使用了Random r = new Random();StringBuilder sb =  new StringBuilder();for(int i=0;i<=5;i++){int s = r.nextInt(10);sb.append(s);}%><!DOCTYPE HTML>
<html><head><title>短信验证码</title><script src="mobile/jquery-1.4.3.min.js" charset="utf-8"></script><link rel="stylesheet" href="mobile/mobile.css"><script type="text/javascript">$(function(){var code = 0;var flag = false;var get = false;$('#get').click(function(){if(flag)return;//未过期 不可再获取sendSmsCode();});function sendSmsCode(){//url:'getSms',      也可以//因为存在 异步执行的问题 所以 在ajax成功后，再设置某些值$.ajax({type : "POST",url  : '<%=path%>/getSms',data : {method:"getSmsCode"},dataType : "json",success : function(data) {code = data;$('#code').html('验证码为：'+code);$('#get').attr('disabled','true');flag = true;get = true;time();},error : function(data) {$('#code').html("对不起服务器繁忙，请稍后再试！");}});}function time(){var t = 10;var time = window.setInterval(function(){t--;$('#get').val(t+'秒后失效');if(t==0){$('#code').html('验证码已失效，请重新获取！');$('#get').val('获取验证码');$('#get').removeAttr('disabled');flag = false;send = false;clearInterval(time);}    },1000);}$('#in').click(function(){if(!get) {alert('请获取短信验证码！');return;}if(!flag) {alert('短信验证码已失效！');return;}var rs = $('input[name="sms"]').val();if(rs.length==0){alert('请输入短信验证码！');return;}if(rs != code){alert('短信验证码错误!');}else{alert('正确!');}});});</script></head><body><div><br/><h3 style="margin-left:110px">短信验证码 倒计时重新获取</h3></br><span style="margin-left:100px;font-weight:bold;color:red">短信验证码：</span> <input type="text" style="margin-left:0px;width:85px;font-weight:bold;" name="sms" placeholder="请输入验证码"/><input type="button" style="height:30px;width:90px;color:blue;font-weight:bold;margin-left:10px" id="get" value="获取验证码"/><br/><span id="code" style="margin-left:150px;color:red"></span><br/></div><br/><input type="button" style="margin-left:130px;height:30px;width:200px;color:blue;font-weight:bold" value="确定并提交" id="in"/></body>
</html>

后台随机产生验证码：

public class SmsService extends HttpServlet {private static final long serialVersionUID = 5846536395092919495L;@Overridepublic void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException{request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String param = request.getParameter("method");System.out.println("================");System.out.println("param="+param);System.out.println("================");Random r = new Random();StringBuilder sb =  new StringBuilder();for(int i=0;i<=5;i++){int s = r.nextInt(10);sb.append(s);}System.out.println("短信验证码 ："+sb);PrintWriter pw = response.getWriter();pw.write(sb.toString());pw.flush();pw.close();}}

效果示意--

Java技术圆桌会-微信群，欢迎大家的加入，专注技术讨论和学习。

加入的同学可以先加我微信：surwen0988 备注-圆桌会，然后拉你进群。

验证码过期(小功能)相关推荐

php实现短信找回密码,thinkphp5怎么调用云片接口实现发送短信验证码找回密码功能...
thinkphp5怎么调用云片接口实现发送短信验证码找回密码功能发布时间:2020-12-11 12:33:42 来源:亿速云阅读:60 作者:小新小编给大家分享一下thinkphp5怎么调用云 ...
java 后端验证码逻辑_Java后端产生验证码后台验证功能的实现代码
直接跳severlet在java后台生成验证码: @RequestMapping(value="yzm.action") public void Yzm(HttpSession s ...
vue3.0 抽奖小功能
vue3.0 抽奖小功能我给写进组件了 <template><div id="toll"><div class="lottery-box ...
html5实现短信验证修改密码,thinkphp5如何调用云片接口实现发送短信验证码找回密码功能...
下面由thinkphp框架教程栏目给大家介绍thinkphp5如何调用云片接口实现发送短信验证码找回密码功能,希望对需要的朋友有所帮助! 思路: 1.用户输入手机号,请求获取短信验证码. 2.thin ...
如何使用短信验证码完成注册功能
如何使用短信验证码完成注册功能一. MD5加密工具类 import java.security.MessageDigest; import java.security.NoSuchAlgorithm ...
iOS 生成带 logo 的二维码，区域截屏保存至相册（小功能二连发 (一)）
原文链接:http://www.jianshu.com/p/36e9f012ef39 生成带 logo 的二维码区域截屏相关 -- 由3033分享开篇最近项目需要搞了几个相对独立的小功能,今天有 ...
高德地图小蓝点_一会晴天一会下雨？夏日想要顺利出行高德地图这些小功能最实用...
不同于其他三个季节,夏天总是有很多种烦恼,变化不定的天气就是其中最为影响出行的一项因素.而面对忽晴忽雨的天气,如何才能在夏日顺利出行呢?看看高德地图的这些实用小功能吧. ·实时天气预报高德地图可以实 ...
猫猫学iOS（四十五）之常用的小功能比如打电话、打开网址、发邮件、发短信打开其他应用。...
猫猫分享,必须精品原创文章,欢迎转载.转载请注明:翟乃玉的博客地址:http://blog.csdn.net/u013357243?viewmode=contents 简介 iOS中的很多小功能都 ...
手机息屏后停止_手机息屏还能这样玩？华为这几个隐藏小功能快学起来
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,如有侵 ...

验证码过期(小功能)

验证码过期(小功能)相关推荐

最新文章

热门文章