js+html制作简单验证码


Posted in Javascript onFebruary 16, 2017

本文实例为大家分享了JavaScript制作验证码的具体代码,供大家参考,具体内容如下

<html>
<head>
<meta charset="utf-8"/>
<title>js验证码</title>
<style type="text/css">
 #login{
  width:50px;
  height:30px;
  line-height:30px;
  margin:0 auto;
  background-color:#eee;
  text-align:center;
  color:red;
 }
 p{
  width:75px;
  height:30px;

  margin:0 auto;
 }
 
</style>
</head>
<body>
<p>验证码:</p>
<div id="login" onclick="show()"><a href="#"></a></div>
<script type="text/javascript">
  function codes(n){
      var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
      var b="";
    for (var i = 0;i<n;i++){
      var index=Math.floor(Math.random()*62);
       b+=a.charAt(index);

    }
    return b;
    };
    function show(){
      document.getElementById("login").innerHTML=codes(4);
    
  }
  window.onload=show;


</script>

</body>
</html>

另一个js验证码的部分代码:

var code ; //在全局定义验证码 
//产生验证码 
function createCode(){ 
 code = ""; 
 var codeLength = 4;//验证码的长度 
 var checkCode = document.getElementById("code"); 
 var random = 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 index = Math.floor(Math.random()*36);//取得随机数的索引(0~35) 
 code += random[index];//根据索引取得随机数加到code上 
 } 
 checkCode.value = code;//把code值赋给验证码 
} 
//校验验证码 
document.getElementById("Yzm").addEventListener("change",validate); 
 
function validate(){ 
 var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写 
 if(inputCode.length <= 0) { //若输入的验证码长度为0 
 alert("请输入验证码!"); //则弹出请输入验证码 
 $("#Yzm").focus(); 
 YZM = false; 
 } 
 else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 
 alert("验证码输入错误!@_@"); //则弹出验证码输入错误 
 createCode();//刷新验证码 
 $("#Yzm").val("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span> 
 $("#Yzm").focus();//重新聚焦验证码框 
 YZM = false; 
 } 
 else { //输入正确时 
 $("#Yzm").blur();//绑定验证码输入正确时要做的事 
 YZM = true; 
 
 } 
};

附效果图:

js+html制作简单验证码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ui resizable bug解决方法
Oct 26 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
Vue 仿百度搜索功能实现代码
Feb 16 #Javascript
javascript实现秒表计时器的制作方法
Feb 16 #Javascript
jQuery实现搜索页面关键字的功能
Feb 16 #Javascript
canvas时钟效果
Feb 16 #Javascript
支持移动端原生js轮播图
Feb 16 #Javascript
jQuery为DOM动态追加事件的方法
Feb 16 #Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 #Javascript
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
第三节 定义一个类 [3]
2006/10/09 PHP
如何给phpadmin一个保护
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python开启debug模式的方法
2019/06/27 Python
Python初学者常见错误详解
2019/07/02 Python
简单了解python变量的作用域
2019/07/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
小学生操行评语
2014/04/22 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
2014年应急工作总结
2014/12/11 职场文书
增值税发票丢失证明
2015/06/19 职场文书
公司出差管理制度范本
2015/08/05 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Python 统计序列中元素的出现频度
2022/04/26 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript