<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. XSS和CSRF

    说到XSS这个问题,XSS又叫跨站请求攻击,大意是说比如我发表了一篇博客,然后我在自己博客里面插入了一段恶意的js脚本代码,这段代码用于获取当前用户的cookie,并发送到我的服务器,当你们在看到这篇 ...

  2. 项目重构之数据源配置与优化:log4j 配置数据库连接池Druid,并实现日志存储到数据库

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...

  3. Spring AOP实战例子与springmvc整合不起效果的解决办法

    在使用AOP之前,首先我们先了解一下什么是AOP吧.在网上很多人将AOP翻译为“面向切面编程”,什么是面向切面?与面向对象有什么区别呢? 在回答这两个问题之前,我们先要明白切面的概念. 切面由切点与增 ...

  4. for循环输出漏斗的形状【java】

    使用for循环语句输出以下“漏斗”效果: +------+ |\..../| | \../ | | \/ | | /\ | | /..\ | |/....\| +------+ 代码:(解决思路详见代 ...

  5. [转]nodeJS中redis初步使用

    本文转自:https://blog.csdn.net/frankenjoy123/article/details/55209637 Node.js下使用Redis,首先: 1.有一台安装了Redis的 ...

  6. 【转载】Windows服务器修改远程桌面默认端口

    因为 windows服务器远程桌面端口默认是 3389端口,使用系统默认端口的风险很大,很容易被攻击软件扫描以及攻击,同时频繁的扫描和攻击会导致服务器的 CPU 及带宽资源耗尽,因此为了保证服务器的安 ...

  7. WPF系列(1)WPF和XAML基础

    终于下定决心开始更新WPF一个系列的文章,这里主要是出于两个目的,一是自己对所学的知识有一个系统的总结,二十希望能对其他人有些帮助,如果您觉得我写的不好,欢迎提意见. 那么既然我要开始写WPF,那我们 ...

  8. 设计模式—模板方法的C++实现

    这是Bwar在2009年写的设计模式C++实现,代码均可编译可运行,一直存在自己的电脑里,曾经在团队技术分享中分享过,现搬到线上来. 1. 模板方法简述 1.1 目的 定义一个操作中的算法骨架,而将一 ...

  9. 持续集成 自动化构建、测试、部署您的Coding代码

    持续集成(Continuous Integration)指的是,频繁地(一天多次)将代码集成到主干. 持续集成的目的,就是让产品可以快速迭代,同时还能保持高质量. 它的核心措施是,代码集成到主干之前, ...

  10. windows 上用 docker 部署aspnetcore 2.0

       首先下载docker for windows 并且 安装. 这其中需要显卡支持虚拟化  windows系统升级到专业版  bois 启用虚拟   通过vs2017 创建一个net core ap ...