<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. 【python cookbook】【数据结构与算法】11.对切片命名

    问题:如何清理掉到处都是硬编码的切片索引 解决方案:对切片命名 假设有一些代码用来从字符串的固定位置中取出具体的数据(比如从一个平面文件或类似的格式:平面文件flat file是一种包含没有相对关系结 ...

  2. Virtualbox后台管理之VBoxManage

    Virtualbox是提供了后台启动的.只是不是默认的. 查看有哪些虚拟机 VBoxManage list vms 查看虚拟的详细信息 VBoxManage list vms --long 查看运行着 ...

  3. ectouch第八讲 之模板内容修改

    前台:1.前台页面logo代码[ 文件位置:\mobile\themes\default\index.dwt] <div style="text-align: center;paddi ...

  4. C#：实现托盘（任务栏图标与托盘图标互斥）

    实现托盘(任务栏图标与托盘图标互斥),并且在点击任务栏图标时实现的最小化与点击最小化按钮分离. 具体如下: 1.向窗体上添加如下控件:MenuStrip menuStrip1, NotifyIcon ...

  5. Greenplum的全量备份之gpcrondump

    gpcrondump是对gp_dump的一个包装,可以直接调用或者从crontab中调用.这个命令还允许备份除了数据库和数据之外的对象,比如数据库角色和服务器配置等. gpcrondump 常用到的参 ...

  6. CSS3 功能

    1.  CSS3在css2的基础上增加了很多功能,ie8以下的浏览器有可能不支持某些属性,增加了很多圆角.渐变.旋转.阴影等效果 2.  文本修饰 text-decoration 属性用来设置或删除文 ...

  7. idea项目无法自动导入maven库

    解决:idea版本由15.0.*(需要Java8)降为14.1.4(Java7即可),搞定......

  8. 【转】在Eclipse中建立第一个Servlet程序

    转载地址:http://kin111.blog.51cto.com/738881/163354 继上篇在Eclipse中搭好了tomcat环境后,我们建立一个最简单的servlet程序,这个serve ...

  9. 从客户端中检测到有潜在危险的 Request.Form 值

    今天在使用Kindeditor的时候,出现了如题的错误. 错误如图: 百度了下,艰难的找了原来是Framework的问题,原来用的2.0,后面变成了4.0,验证级别也更高了: 解决办法:在config ...

  10. 对table的tr使用display：block显示colspan失效问题的解决

    qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...