<!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. Android 推送实现

    解决数据同步的问题:常用的方法有2种. (1) 定时去服务器上查询数据,也叫Polling. (2) 手机跟服务器之间维护一个 TCP 长连接,或者使用SMS,当服务器有数据时,实时推送到客户端,也就 ...

  2. 【BZOJ】1104: [POI2007]洪水pow

    题意 给一个\(n * m(1 \le n, m \le 1000)\)的矩阵,如果\(a_{i, j}\)为正表示城市.\(|a_{i, j}|(|a_{i, j}| \le 1000)\)是格子\ ...

  3. 【Eclipse】修改 编码格式

    eclipse 默认编码居然是GBK,js文件默认编码是ISO-....怎么可以这样呢? 都修改成UTF8的方法: 1.windows->Preferences...打开"首选项&qu ...

  4. java画图程序_图片用字母画出来

    最近在研究怎样将图片用字母在文本编辑工具中“画”出来. 你看了这个可能还不知道我想说什么? 我想直接上图,大家一定就知道了 第一张:小猫 原图:http://www.cnblogs.com/hongt ...

  5. AJAX-跨域解决之 JSONP

    (一)AJAX ajax 就是从某个文件中去找相关的数据,把数据拿过来以后,利用数据 分析数据 去做我们想做的事情    分两部分:拿数据                  用数据 oUsername ...

  6. ld: warning: directory not found for option 去掉警告的方法

    工程老是提示ld: warning: directory not found for option:xxxxxx 这种提示,通常是由于添加了第三方SDK,但是后来改了个名字或者去掉了SDK,但是在 B ...

  7. 20145330《Java学习笔记》第一章课后练习8知识总结以及IDEA初次尝试

    20145330<Java学习笔记>第一章课后练习8知识总结以及IDEA初次尝试 题目: 如果C:\workspace\Hello\src中有Main.java如下: package cc ...

  8. php在window下的环境配置(VC9)

    配置PHP5:  1. 配置PHP5.3.3,打开php安装目录(笔者是D:\php\php5)可以看到目录下有两个这样的文件php.ini-    development和php.ini-produ ...

  9. crontab的坑

    1. 命令  全路径 (eg:which mysql) 2.执行脚本  (脚本中加上#!/bin/bash) eg: /bin/bash script.sh 3. 输出信息(>>) 使用全 ...

  10. 关于html页面布局

    之前做的一个网站,结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了,今天刚刚改好,发现还是自己经验不足,做个小总结. 一.div布局要固定宽高 当div不设计长宽高而是自动由内部控件”撑“ ...