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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
Javascript玩转继承(二)
May 08 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 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
php开发环境配置记录
2011/01/14 PHP
php中对2个数组相加的函数
2011/06/24 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php链表用法实例分析
2015/07/09 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python实现音乐下载的统计
2018/06/20 Python
Python实现把类当做字典来访问
2019/12/16 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python代码实现猜拳小游戏
2020/11/30 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
社区党建工作汇报材料
2014/08/14 职场文书
党员自我对照检查材料
2014/08/19 职场文书
求职自我评价范文100字
2014/09/23 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
小学运动会开幕词
2016/03/04 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
nginx实现动静分离的方法示例
2021/11/07 Servers