<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. Linux查看CPU和内存使用情况【转】

    转自:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应 ...

  2. 配置SecondaryNameNode

    一.SecondaryNameNode概念: 光从字面上来理解,很容易让一些初学者先入为主:SecondaryNameNode(snn)就是NameNode(nn)的热备进程.其实不是.ssn是HDF ...

  3. 11、Jsp加强/EL表达式/jsp标签

    1 Jsp基础回顾 Jsp基础 1)Jsp的执行过程 tomcat服务器完成:jsp文件->翻译成java文件->编译成class字节码文件-> 构造类对象-> 调用方法 to ...

  4. 《C++标准库》

    函数对象 使用bind时注意,占位符有自己的命名空间std::placeholders,如果不在程序开始处using std::placeholders,那么就要写成: std::bind(std:: ...

  5. coco2dx服务器简单例子

    实现的单个socket例子,了解socket原理. 先创建一个win32的项目(命令行的),作为服务端 // SocketServer.cpp : 定义控制台应用程序的入口点.// #include ...

  6. Oracle找出非数字

    可以这样判断: select translate('99999999999999', '\1234567890', '\') from dual; 返回的是空 ​ select translate(' ...

  7. java文件上传到服务器

    最近项目中使用到了文件从本地到服务器的功能.其实是为了解决目前浏览器不支持获取本地文件全路径.不得已而想到上传到服务器的固定目录,从而方便项目获取文件,进而使程序支持EXCEL批量导入数据. 在前台界 ...

  8. python请求java Selenium Webdriver

    下载jar包: selenium-server-standalone-2.44.0.jar 运行jar包: java -jar selenium-server-standalone-2.44.0.ja ...

  9. 数据库查询优化器的艺术：原理解析与SQL性能优化

    数据库查询优化器的艺术 作者:李海翔 Oracle公司MySQL全球开发团队.资深专家 简单的浏览了一遍,由于以前没有接触过SQL优化这些知识,读起来还是非常吃力的,不过收获还是很大的. 作者通过对M ...

  10. 操作SQLite的dbhelper

    操作SQLite的dbhelper public class DbHelper { string connStr = @"Data Source=" + System.Enviro ...