<html>

<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}

.unchanged {
border: 0;
}
</style>
<script language="javascript" type="text/javascript">

var code; //在全局 定义验证码
function createCode() {
code = "";
var codeLength = 6;//验证码的长度
var checkCode = document.getElementById("checkCode");
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');//所有候选组成验证码的字符，当然也可以用中文的

for (var i = 0; i < codeLength; i++) {

var charIndex = Math.floor(Math.random() * 36);
code += selectChar[charIndex];

}
// alert(code);
if (checkCode) {
checkCode.className = "code";
checkCode.value = code;
}

}

function validate() {
var inputCode = document.getElementById("input").value;
if (inputCode.length <= 0) {
alert("请输入验证码！");
}
else if (inputCode != code) {
alert("验证码输入错误！");
createCode();//刷新验证码
}
else {
alert("^-^ OK");
}

}

</script>
</head>
<body onload="createCode()">
<form action="#">
<input type="text" id="input" />
<input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
<input id="Button" onclick="validate();" type="button" value="确定" />
</form>
</body>
</html>

纯js写验证码的更多相关文章

  1. 使用纯js写的一个分页

    上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...

  2. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  3. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  4. 原生JS写验证码

    1.先创建一个一个输入框用来用户输入验证码和一个span容器用来存放系统给出的验证码和一个刷新按钮还有一个登录按钮 <input type="text" class=&quo ...

  5. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

  6. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

  7. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  8. 纯js生成验证码

    实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  9. 纯JS写的2048游戏，分享之

    这几天玩儿着2048这个游戏,突然心血来潮想练习下敲代码的思路.于是乎就模仿做了一个,到眼下位置还没有实现动态移动,不是非常好看,只是玩儿着自己模仿的小游戏还是蛮爽的,哈哈 假设没有玩儿过这个游戏,最 ...

随机推荐

  1. TI CC254x BLE教程 4

    TI的CC254x芯片 1. SoC 2. RF收发器+8051MCU 128/256KB Code空间. 3. Master或者Slave 4. 可编程flash 5. 8KB SRAM 6. 全软 ...

  2. Java排序算法（1）

    Java中的排序算法(1)  package com.softeem.jbs.lesson4; import java.util.Random; /** * 排序测试类 * * 排序算法的分类如下: ...

  3. Java 门面模式 浅析

    Java中的门面模式,一般来说他的用途是隐藏一些不希望用户看到的东西,比如方法,变量,并且这些变量是不能够设置成私有的,因为在系统内部有些地方需要调用.在Tomcat的HttpServletReque ...

  4. How to create UrlSlug in Asp.Net MVC

    转自:http://www.ehsanghanbari.com/Post/20/how-to-create-urlslug-in-aspnet-mvc UrlSlug Is a way of gene ...

  5. WKWebView新特性及JS交互

    引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...

  6. jstl和jsp脚本变量相互访问

    1.jsp脚本访问jstl标准动作的变量,可以通过隐式的范围变量来获取,对于页面作用域的变量,可以通过pageContext.getAttribute()来获取,也可以通过动作来获取: <c:s ...

  7. svn down代码的时候提示“由于目标计算机积极拒绝，无法连接”

    如上图所示: 原因1:svn没有启动成功 原因2:防火墙没有svn的端口号3690 解决方法: 1.启动svn服务 svnserve -d -r svn路径   例如:svnserve -d -r / ...

  8. libsqlite3.dylib找不到

    Xcode7中 Link Binary With Libraries 没有 .dylib库,只能找到对应的 .tbd,但不能代替使用,通过查找资料,尝试后得到以下两种解决方法. 方法1. (heqin ...

  9. get/post方式调用http接口

    http://www.cnblogs.com/java-pan/tag/HTTP/ http://www.cnblogs.com/snoopylovefiona/p/4730242.html(可做参考 ...

  10. Lambda表达式 一些基本用法

    带条件的:IQueryable<UserInfo> demo=db.UserInfo.where<UserInfo>(u=>u.ID>2); 取指定列数据:var ...