<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. Web API 处理机制剖析 --- 拨开迷雾看本质

     前言 最近开发了几个项目,用到了web api,也通过项目加深了对web api的理解.本文试图从内部原理讲解web api的本质.透过重重迷雾,看清本质,就能更好的把握和利用好web api. 1 ...

  2. docker 构建 https 私有仓库 Registry

    1.安装docker # docker install docker 2.拉取仓库镜像 # docker pull registry 3.生成认证certificate # mkdir ~/certs ...

  3. PHP中的__set和__get方法

    当调用或者设置类不存在的方法时,_会调用_set和__get方法 以下是示例 <?php class HandsonBoy { private $name = 'chenqionghe'; pr ...

  4. 插槽slot

    主要是让组件的可扩展性更强.1.匿名slot使用 //定义组件my-component <div class="myComponent"> <slot>&l ...

  5. 浅谈JavaScript之事件(上)

    一  简述JavaScript及其在浏览器中的地位 (一)  浏览器主要构成 虽然不同浏览器之间存在差异(如Google Chrome,Firefox,Safari和IE等),但单从浏览器构成来说,大 ...

  6. Mysql的跨表更新

    本文介绍mysql多表 update在实践中几种不同的写法. 假定我们有两张表,一张表为Product表存放产品信息,其中有产品价格列Price:另外一张表是ProductPrice表,我们要将Pro ...

  7. 高可用集群之keepalived+lvs实战-技术流ken

    keepalived简介 lvs在我之前的博客<高负载集群实战之lvs负载均衡-技术流ken>中已经进行了详细的介绍和应用,在这里就不再赘述.这篇博文将把lvs与keepalived相结合 ...

  8. [转]usdt omnicore testnet 测试网络

    本文转自:https://www.jianshu.com/p/417c280b8f9f Testnet 模式允许 omni core 运行在比特币测试链上,用于安全测试. 为了在 testnet 上收 ...

  9. 第一册:lesson 11.

    原文:Is this your shirt? A:Whose shirt is that? Is this your shirt B? B:NO,sir. It's not my shirt.This ...

  10. windows 下 nginx 配置文件路径

    nginx在windowns下路径 http{ #虚拟主机1 server{ listen 80; #监听端口,基于IP配置的时候变更此处,比如192.168.1.100:8080; server_n ...