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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
VUE项目初建和常见问题总结
Sep 12 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 图像尺寸调整代码
2010/05/26 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
PyQT实现多窗口切换
2018/04/20 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python通过cython加密代码
2020/12/11 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
广告学专业求职信
2014/06/19 职场文书
初中体育课教学反思
2016/02/16 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python