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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
5s推行计划书
2014/05/06 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
公司员工培训管理制度
2015/08/04 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang