纯js写验证码

<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 >
<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>

时间: 2024-10-07 04:22:17

纯js写验证码的相关文章

使用纯js写的一个分页

上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到

原生JS写验证码

1.先创建一个一个输入框用来用户输入验证码和一个span容器用来存放系统给出的验证码和一个刷新按钮还有一个登录按钮 <input type="text" class="dl" id="sryzm" /><br /> <span id="ysyzm" style="color:white; font-weight:bolder; font-size:18px; min-width:70px

纯手写验证码MVC中

轻松实现验证码,以此为基础,什么高大上验证码万变不离其中,有注释的喔:-O: 生成验证码: public void Validate() { Random r = new Random(); string str = null; for (int i = 0; i < 5; i++) { int rNumber = r.Next(0, 10); str += rNumber; //随机取0到10之间的5个随机数存入字符串变量str } this.Session["Validate"

纯JS写的2048游戏,分享之

这几天玩儿着2048这个游戏,突然心血来潮想练习下敲代码的思路.于是乎就模仿做了一个,到眼下位置还没有实现动态移动,不是非常好看,只是玩儿着自己模仿的小游戏还是蛮爽的,哈哈 假设没有玩儿过这个游戏,最好先试玩儿下,这样看起下边的代码来easy些 用的是event.临时不支持firefox下玩儿... 试玩儿>> 里边好多步骤写得不够简单介绍明了.欢迎指正 两个小时构思,主要构思用什么形式存表格,以及当中用到的几个比較关键的方法,比方:是否须要移动,是否须要合并,移动方法.合并方法等,然后開始编

纯js写的分页表格数据为json串

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String basePath = request.getSchem

纯JS写出日历

封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(yy,mm,1),t if(mm==0){mm=12;yy--} var

纯js写复选框的全选,全部选,反选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var obtn1 = document.getElementById('btn1'); var obtn2 = document.getElementById('btn2'); var obt

纯js轮播测试版

这是一个纯js写的轮播测试版,代码有待改进 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/function.js"></script> <style type="tex

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr