jq验证码换一换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>换一换</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{padding:0;margin:0;}
ul{padding:0;margin:0;}
.box{ width:600px;height: auto;margin:0 auto; }
.box>div{margin-top: 15px;font-size: 18px}
.box .code-box .code{font-size: 22px;color: #f00;}
.box .code-box .huan{font-size: 18px;cursor: pointer;}
.box .input input{width: 200px;height: 28px;}
.button{text-align: center;width: 80px;height: 30px;background: #FF3333;line-height: 30px;color: #fff;cursor: pointer;border-radius: 5px}
.change{color:#f00;font-size:16px;}
</style>
</head>
<body>
<div class="box">
<div class="code-box">
<span>验证码</span>
<span class="code"></span>
<span class="huan">换一张</span>
</div>
<div class="input">
<span>输入验证码</span>
<input type="text" id="code" placeholder="输入验证码">
<span class="change"></span>
</div>
<div class="button">提交</div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".huan").on("click",createCode)
$(".button").on("click",validation)
createCode()//一打开页面就先加载一张验证码出来
})
var code;//定义一个全局验证码
var flag =true;
function createCode(){
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符,也可以用中文的
code = '';
var codeLength=5;
var codeContent = $(".code");
for(var i=0;i<codeLength;i++){
var charIndex =Math.floor(Math.random()*selectChar.length);//随机数
//alert(charIndex)
code +=selectChar[charIndex];//一张验证码有五个字符组成
codeContent.html(code);//显示验证码
}
}
function validation(){
var Code = $("#code").val();
//Code.replace(/[\W]/g,'');
if(Code.length <=0){
$(".change").show().html("验证码为空");
}else if(Code !=code && Code.length >0){
$(".change").show().html("验证码有误");
createCode()//如果输入的验证码有误就刷新验证码
}
else{
$(".change").html("验证码正确");
}
}
</script>
</body>
</html>
jq验证码换一换的更多相关文章
- [转]搬瓦工换机房换ip之后不能连外网
搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
- vue换一换功能原型
<html> <meta charset="utf-8"> <head> <script src="https://cdn.bo ...
- [转]***换机房换ip之后不能连外网
***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
- Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位(转)
Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...
- 今天抠图,Python实现一键换底片!想换什么换什么(附源码)
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 生活中我们会拍很多的证件照,有的要求红底,有的是白底,有的是蓝底,今天不通 ...
- jsp验证码 (通过单击验证码或超链接换验证码)
#code.jsp <%@ page language="java" import="java.util.*" import="java.awt ...
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- 换一换js
(function(){ var tit = $("#changes"), con = $("#wday>ul"), page = con.length, ...
- vue 实现 换一换 功能
点击按钮列表页随机获取三个商品并渲染 后台返回的数据为 d为一个数组 数组 arr=[0,1,2]初始值 data:{ list:d, arr:[0,1,2] } 生产随机数 replace:func ...
随机推荐
- linux 安装vbox增强工具
首先在虚拟机控制台点设备--------安装增强功能,这样会用虚拟光驱加载增强功能镜象. 然后打开终端,先转到root身份:=================su================= f ...
- 未能加载文件或程序集"Microsoft.Web.Infrastructure 的解决方案
转载请注明来源: http://www.cnblogs.com/zaiyuzhong/p/Unload-Infrastructure-Solution.html 部署MVC5 项目发布到文件系统 I ...
- ACM: Copying Data 线段树-成段更新-解题报告
Copying Data Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Description W ...
- Centos 下安装Docker 遇到的一些错误
1.公司的服务器的内核版本:2.6.32-431.23.3.el6_x86_64 如何升级内核请参考前一篇文章 2.在这个地址上面下载 的 https://test.docker.com/builds ...
- Photoshop教您快速的制作标准一寸证件照教程
Photoshop教您快速的制作标准一寸证件照教程 对急需证件照的朋友,只要有一部相机,有电脑安装了PS软件,就可很快自己完成一寸照片的制作. 首先将相机卡里的照片存放在电脑硬盘里: 打开PS图片处理 ...
- Oracle连接超时
客户机 要想 连接 oracle服务机(装了数据库的机子),只需要在客户机配置一个 本地服务名就行了,不管你用Oracle服务端的配置工具 还是客户端的配置工具,都没有问题. 如果只是客户机连接服务机 ...
- 使用Privoxy做智能代理切换
使用Privoxy做智能代理切换 You take the blue pill, the story ends, you wake up in your bed, and believe whatev ...
- ICE——1.Printer
一:打印机 1.Slice定义: interface Printer { void printString(string s); }; 我们的Slice定义含有一个接口,叫作Printer.目前,我们 ...
- UniversalAndroidImageLoader出现异常:ImageLoader: Unable to resolve host "https": No address associated with host
问题描述 使用ImageLoader时,出现如下错误,始终加载图片错误,显示img_error的图片.UniversalAndroidImageLoader出现异常:ImageLoader: Unab ...
- java web(一) 使用sql标签库+tomcat+mysql手动创建一个jsp练习总结
2016-09-0111:06:53 使用sql标签库+tomcat+mysql手动创建一个jsp 1. 1.1安装tomcat ...