<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. 161021、spring异步调用，完美解决！

    前言 项目中,用户抢单,下单需要向对方推送消息,但是加上推送就会造成抢单和下单性能降低,反应变慢,因为抢单下单动作跟推送部分是同步的,现在想改成异步推送. 在Java应用中,绝大多数情况下都是通过同步 ...

  2. 解析XML的四种方式

    四种操作xml的方式: SAX, DOM, JDOM , DOM4J的比较 1. 介绍 1)DOM(JAXP Crimson解析器)         DOM是用与平台和语言无关的方式表示XML文档的官 ...

  3. Majority Element

    #include<map> using namespace std;class Solution {public:    int majorityElement(vector<int ...

  4. 安装新版xampp后apache无法启动提示：Apache Service detected with wrong path解决方案

    我以前安装过xampp,因为学习thingPHP需要升级PHP5.0以上,所以我就卸掉了xampp,从新安装新版本的xampp其中PHP是最新版的,但是安装后启动xampp提示如下:Apache Se ...

  5. Docker Centos安装Redis以及问题处理

    之前一篇文章 Redis安装及主从配置 介绍了redis的安装配置,另一篇文件介绍了 Docker Centos安装Openssh .今天将两篇文件结合一下——在Docker Centos环境下搭建r ...

  6. 快速稳定的维护PHP

    Just to recap, previously we'd have this sort of thing: namespace me\adamcameron\testApp; use Guzzle ...

  7. linux 时钟源初步分析linux kernel 时钟框架详细介绍

    初步概念: 看datasheet的关于时钟与定时器的部分, FCLK供给cpu, HCLK供给AHB总线设备(存储器控制器,中断控制器.LCD控制器.DMA.USB主机控制器等), PCLK供给APB ...

  8. ubunut 12.04 (64bit) android编译环境搭建

    sudo apt-get install git-core gnupg flex bison gperf build-essential zip curl libgl1-mesa-dev zlib1g ...

  9. c# ReaderWriterLock类

    先前也知道,Monitor实现的是在读写两种情况的临界区中只可以让一个线程访问,那么如果业务中存在”读取密集型“操作,就 好比数据库一样,读取的操作永远比写入的操作多.针对这种情况,我们使用Monit ...

  10. 过滤器（Filter）案例：检测用户是否登陆的过滤器

    *****检测用户是否登陆的过滤器:不需要用户跳转到每个页面都需要登陆,访问一群页面时,只在某个页面上登陆一次,就可以访问其他页面: 1.自定义抽象的 HttpFilter类, 实现自 Filter ...