<!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. [转]Mac 科研常用软件

    转自:http://bbs.feng.com/read-htm-tid-7698336.html 我的 Mac 是 2012 年的 Pro Retina,现在主要用的是 Mac 系统,Windows ...

  2. ACM: SGU 101 Domino- 欧拉回路-并查集

    sgu 101 - Domino Time Limit:250MS     Memory Limit:4096KB     64bit IO Format:%I64d & %I64u Desc ...

  3. 2076. The Drunk Jailer

    Problem A certain prison contains a long hall of n cells, each right next to each other. Each cell h ...

  4. 【BZOJ】2879: [Noi2012]美食节

    题意 \(m\)个厨师,\(n\)种菜,每种菜需要做\(p_i\)份,每个厨师做第\(i\)种菜用时\(t_{i, j}\).一个厨师做完一道菜才能做下一道.每份菜的时间是这个厨师做完这道菜的用时加上 ...

  5. Android --#字XO小游戏

    Layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...

  6. memcached 的安装与使用

    准备条件:下载memcached的服务器端memcached-1.2.1.win32.zip(虽然最新版本已经是1. 4.6了,但win版本的好像还一直未更新,或找不到.) A.windows上的安装 ...

  7. osgearth_city例子总结

    osgearth_city例子总结 转自:http://blog.csdn.net/taor1/article/details/8242480 int main(int argc, char** ar ...

  8. linux文件创建、查看、编辑命令

    一.创建文件命令 1.touch命令 linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件.touch   [-acm][-r   ref ...

  9. MAT(Memory Analyzer Tool)工具入门介绍

    1.MAT是什么? MAT(Memory Analyzer Tool),一个基于Eclipse的内存分析工具,是一个快速.功能丰富的JAVA heap分析工具,它可以帮助我们查找内存泄漏和减少内存消耗 ...

  10. poi excel导入

    poi.jar包 import java.io.File;import java.io.FileInputStream;import java.io.IOException; import org.a ...