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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
快速将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
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
JS定时器实例
2013/04/17 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
全面了解js中的script标签
2016/07/04 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python实现学生信息管理系统
2020/04/05 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
就业协议书怎么填
2014/09/15 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Python如何使用循环结构和分支结构
2022/04/13 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python