一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

原生js实现验证码功能

时间：2017-07-03 编辑：简简单单 来源：一聚教程网

效果图：

代码如下：

 代码如下 复制代码
   js验证码  #code{ width:80px; height:30px; font-size:20px; font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; }   
   
window.onload=function(){ var code=document.getElementById("code"); function change(){ // 验证码组成库 var arrays=new Array( '1','2','3','4','5','6','7','8','9','0', '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', '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'              );  // 重新初始化验证码  codes ='';  // 随机从数组中获取四个元素组成验证码  for(var i = 0; i<4; i++){   // 随机获取一个数组的下标   varr=parseInt(Math.random()*arrays.length);   codes += arrays[r];  } // 验证码添加到input里  code.value=codes; }  change();//加载显示在页面上  code.onclick=change;//单击更换验证码//单击验证 varcheck=document.getElementById("check"); varinput=document.getElementById("input"); check.onclick=function(){   varinputCode= input.value.toUpperCase(); //取得输入的验证码并转化为大写    if(inputCode.length==0) { //若输入的验证码长度为0   alert("请输入验证码！"); //则弹出请输入验证码  }  else if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时   alert("验证码输入错误！请重新输入"); //则弹出验证码输入错误   change();//刷新验证码   input.value="";//清空文本框  }     else{ //输入正确时   alert("输入正确"); //弹出输入正确  }  }} 


相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2

网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理