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 1.7.2中getAll方法的疑惑分析
May 23 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
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
php 表单验证实现代码
2009/03/10 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
vue路由懒加载的实现方法
2018/03/12 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
绩效工资分配方案
2014/01/18 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
人事代理委托书
2014/09/27 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript