<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. Docker概念学习系列之详谈Docker 的核心组件与概念(5)

    不多说,直接上干货!   见[博主]撰写的https://mp.weixin.qq.com/s/0omuSAjF5afJBZBxhbKTqQ 想要了解Docker,就必须了解Docker的五大核心概念 ...

  2. Android主线程的消息系统(Handler\Looper)

    前言: 之前的文章写的都是关于Bitmap和内存的优化技术,这一篇文章给大家谈谈Handler. Handler是Android系统中比较重要的一个知识,在Android多线程面试经常会被问到,在实际 ...

  3. Salesforce Sales Cloud 零基础学习(四) Chatter

    Chatter是一个Salesforce实时协作应用程序,它允许你的用户一起工作.互相交谈和共享信息,不管用户角色或位置如何,连接.并激励用户在整个组织内高效工作. Chatter 让用户们在 Opp ...

  4. 微信小程序跳转小程序

    <navigator target="miniProgram" open-type="navigate" app-id="{{BappId}}& ...

  5. MySQL数据库——表操作

    I.表操作 一.创建表 基本语法如下: create table 表名( 列名 类型 是否可以为空, 列名 类型 是否可以为空 )ENGINE=InnoDB DEFAULT CHARSET=utf8: ...

  6. 连接MySQL的10060错误:Can't connect to MySQL server on '*.*.*.*'(10060)

    使用MySQL的图形界面管理工具Navicat for MySQL连接Mysql数据库时提示错误:Can't connect to MySQL server (10060) [出现该问题可能的原因:] ...

  7. 第一册:lesson thirty one。

    原文:Where is Sally? A:Where is .. B? B:She is in the garden,A. A:What's she doing? B:She is sitting u ...

  8. 使用Topshelf开发Windows服务、log4net记录日志

    开发windows服务,除了在vs里新建服务项目外(之前有写过具体开发方法,可点击查看),还可以使用Topshelf. 不过使用topshelf需要.netframework 4.5.2版本,在vs2 ...

  9. Mysql索引的类型

    索引的类型 B-Tree索引 B-Tree 索引 通常意味着所有的值都是按顺序存储的,并且每一个叶子页到根的距离相同. B-Tree 索引 能够加快访问数据的速度,存储引擎不再需要进行全表扫描来获取需 ...

  10. php获取服务器信息常用方法(零碎知识记忆)

    突然整理下零碎小知识.......加深下印象: $info = array( '操作系统'=>PHP_OS, '运行环境'=>$_SERVER["SERVER_SOFTWARE& ...