<script language="javascript">
var code; //在全局 定义验证码
function createCode()
{ //创建验证码函数
code = "";
var codeLength =4;//验证码的长度
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];
}
// 设置验证码的显示样式,并显示
document.getElementById("discode").style.fontFamily="Fixedsys"; //设置字体
document.getElementById("discode").style.letterSpacing="5px"; //字体间距
document.getElementById("discode").style.color="#0ab000"; //字体颜色
document.getElementById("discode").innerHTML=code; // 显示
} function but()
{//验证验证码输入是否正确
var val1=document.getElementById("t1").value;
var val2=code;
if(val1!=val2){
alert("验证码错误!");
document.getElementById('t1').value="";
}
}
</script>

验证码框

                <div class="input">
<input id="t1" type="text" name="u" placeholder="验证码" onblur="but()" />
<span id="discode"></span>
<input type="button" value="换一换" class="c" style="height:20px;"onClick="createCode()">
</div>

效果

js验证码实现的更多相关文章

  1. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  2. js验证码有效时间倒计时

    js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  3. 纯js验证码

    纯js验证码 <!DOCTYPE html> <html> <head> <title>纯js验证码</title> </head&g ...

  4. easyui page添加文本,js验证码

    onLoadSuccess: function (db) { //db是后台数据的返回结果集 $.ajax({ url: "AjaxSource/Buex.ashx", data: ...

  5. JS验证码邮件

    js var time = 30; var canSend = true; function f5() { if (canSend) {//判断是否要ajax发送刷新验证码 验证码在后台刷新 //al ...

  6. js 验证码倒计时

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. angular.js 验证码注册登录

    css部分 header{ height: 50px; line-height: 50px; display: flex; } .callback{ text-align: left; display ...

  8. 一些网站后台模板源码分析 Particleground.js 验证码

    转: https://blog.csdn.net/bcbobo21cn/article/details/51271750 1 灰色简洁企业后台管理模板 效果: 看下项目结构: 它使用了moderniz ...

  9. JS 验证码的实现

    转自:https://github.com/ace0109/verifyCode 正要做一个验证码,网上找到这个还不错: gVerify.js: !(function(window, document ...

  10. JS验证码

    1.引用jquery 2.Html页面 <div> <canvas id="canvas" style="cursor: pointer; height ...

随机推荐

  1. Linux常用命令英文全称与中文解释

    man: Manual 意思是手册,可以用这个命令查询其他命令的用法. pwd:Print working directory 意思是密码. su:Swith user 切换用户,切换到root用户 ...

  2. ADO.NET的整理

    ADO.NET的几个对象 Connection:管理数据库的连接 Command:对数据库执行命令 DataReader:数据流读取器,返回的数据都是快速的且只是“向前”的数据流.无法实例化,只能通过 ...

  3. linux 命令 — sed

    sed stream editor,流编辑器 查找替换 sed 's/pattern/replace_string/' file 替换每一行第一次出现的pattern,将替换后的文本输出到stdout ...

  4. MFC控件编程之鼠标跟键盘消息

    MFC控件编程之鼠标跟键盘消息 在MFC中鼠标消息.键盘消息我们很常用.所以说一下. 鼠标消息分为客户区消息.跟非客户区消息. 一丶客户区消息 我们可以处理消息.来进行我们相应的函数即可. MFC添加 ...

  5. spring-boot (三) spring data jpa

    学习文章来自:http://www.ityouknow.com/spring-boot.html spring data jpa介绍 首先了解JPA是什么? JPA(Java Persistence ...

  6. Ubuntu 安装网卡驱动

    搭建Linux平台的无线热点,需要无线网卡和驱动都要支持 AP. 试了下Ubuntu平台默认驱动并不支持AP模式,所以需要更换驱动,具体操作步骤如下: 1.找到自己网卡芯片的型号,由于我的环境是搭建在 ...

  7. 基于.Net进行前端开发的技术栈发展路线(一)

    前言 今天想讲讲的是我的技术树.我最初是做CS开发的,第一阶段的技术经历是以Powerbuilder来做CS开发,第二阶段开始基于C#做winform开发,眼看前端开发越来越流行,需要更广泛的技术栈势 ...

  8. 线性表&顺序线性表

    第二章 线性表 参考文献:[数据结构(C语言版)].严蔚敏 本篇章仅为个人学习数据结构的笔记,不做任何用途. 2.1 线性结构的特点 (1). 存在唯一的一个被称为"第一个"的数据 ...

  9. 业务开发(六)—— MyBatis框架

    0x01.元素内容必须由格式正确的字符数据或标记组成. Caused by: org.apache.ibatis.builder.BuilderException: Error creating do ...

  10. iOS 快速排序

    一.快速排序概念及其思想 快速排序(QuickSort),又称为交换排序,是分治算法的一种,快速排序采用分治的策略. 1.分治法的基本思想: 将原问题分解为若干个规模更小但结构和原问题相似的子问题.递 ...