JS验证码实现代码


Posted in Javascript onSeptember 14, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<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验证码实现代码

总结

以上所述是小编给大家介绍的JS验证码实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
AngularJS表单验证功能分析
May 26 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 #Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 #Javascript
JavaScript动态绑定详解
Sep 14 #Javascript
React-Native使用Mobx实现购物车功能
Sep 14 #Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 #Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 #Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 #Javascript
You might like
php 变量定义方法
2009/06/14 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
详解PHP队列的实现
2019/03/14 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
解决python 找不到module的问题
2020/02/12 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
党章学习思想汇报
2014/01/14 职场文书
服务之星获奖感言
2014/01/21 职场文书
贷款委托书怎么写
2014/08/02 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
大学生毕业个人总结
2015/02/15 职场文书
党支部书记岗位职责
2015/02/15 职场文书
运动会通讯稿200字
2015/07/20 职场文书
大学生党课感想
2015/08/11 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书