<!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验证码换一换的更多相关文章

  1. [转]搬瓦工换机房换ip之后不能连外网

    搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

  2. vue换一换功能原型

    <html> <meta charset="utf-8"> <head> <script src="https://cdn.bo ...

  3. [转]***换机房换ip之后不能连外网

    ***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

  4. Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位（转）

    Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...

  5. 今天抠图，Python实现一键换底片！想换什么换什么（附源码）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 生活中我们会拍很多的证件照,有的要求红底,有的是白底,有的是蓝底,今天不通 ...

  6. jsp验证码 (通过单击验证码或超链接换验证码)

    #code.jsp <%@ page language="java" import="java.util.*" import="java.awt ...

  7. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  8. 换一换js

    (function(){ var tit = $("#changes"), con = $("#wday>ul"), page = con.length, ...

  9. vue 实现 换一换 功能

    点击按钮列表页随机获取三个商品并渲染 后台返回的数据为 d为一个数组 数组 arr=[0,1,2]初始值 data:{ list:d, arr:[0,1,2] } 生产随机数 replace:func ...

随机推荐

  1. #来自codeforces round 363

    具体情况是这样的:同样的程序,在我自己的电脑上跑出来是正确的结果,而提交到CF的评测机后对于相同的输入数据,结果居然不一样了!反复检查后未发现任何问题.目前怀疑可能与memset有关,因为在一步步修改 ...

  2. [R]R下as.Date()函数的坑

    问题描述: 在本地使用as.Date()函数从POSIXct类型中提取date时,出现了日期不一致的错误.导致处理数据时,总是出问题. 还好被领导发现数据有误,不然这个bug不知道还要潜伏多久.尽管如 ...

  3. VR教育旋风来袭，各大公司争先进军虚拟现实教育

    根据国内一份最新的报告显示,VR技术对于提高学生的学习成绩有非常积极的作用,并且通过测试结果来看,无论是对知识的认知还是成绩测试,VR都起到了非常有效的效果. 2016成为VR元年,虚拟现实技术除了在 ...

  4. Codeforces Round #233 (Div. 2) A、Pages

    #include <iostream> using namespace std; int main(){ int n,p,k; cin >> n >> p > ...

  5. 【BZOJ3439】Kpm的MC密码 trie树+主席树

    Description 背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当然地忘记了密码,只能来解答那些神奇的身 ...

  6. /var文件系统

    /var文件系统  /var 包括系统一般运行时要改变的数据.每个系统是特定的,即不通过网络与其他计算机共享.   /var/catman    当要求格式化时的man页的cache.man页的源文件 ...

  7. Red KV数据 庫设計模式

    转:http://blog.nosqlfan.com/html/3033.html NoSQL带给我们的东西很多,高性能,水平扩展性,还有不一样的思维方式.本文来自@hoterran的个人博客运维与开 ...

  8. 纪念逝去的岁月——C/C++字符串反转

    几年前,我还不会写这个 输入:hello world 输出:dlrow olleh 代码 #include <stdio.h> #include <string.h> void ...

  9. C#项目打开/保存文件夹/指定类型文件，获取路径

    C#项目打开/保存文件夹/指定类型文件,获取路径 转:http://q1q2q363.xiaoxiang.blog.163.com/blog/static/1106963682011722424325 ...

  10. c# Dictionary的遍历和排序（转）

    c#遍历的两种方式 for和foreach for: 需要指定首位数据.末尾数据.数据长度: for遍历语句中可以改变数据的值: 遍历规则可以自定义,灵活性较高 foreach: 需要实现ienume ...