JS验证不重复验证码


Posted in Javascript onFebruary 10, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>不重复验证码</title>
 <style>
  .cont{width:300px;height:auto;margin:50px auto;}
    #useId{width:120px;height:45px;line-height:45px;background:#ccc;text-align:center;font-size:20px;margin:10px;}
 </style>
</head>
<body>
 <div class="cont">
 <div id="useId"></div>
 <input type="text" id="txt" />
 <input type="button" id="btn" value="Start" />
 <div>
 <script>
    function $(id){
     return document.getElementById(id);
    }
    var $useId = $('useId'),
      $txt = $('txt'),
      $btn = $('btn');
    function getStr(){
    var string = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
      str = '';
      while(str.length < 6){
     var str1 = string.charAt(Math.round(Math.random() * 56));
     if(str.indexOf(str1) === -1){
      str += str1;
     }
    }
    $useId.innerHTML = str;
    }
    function checkCode(){
     if($txt.value == $useId.innerHTML){
     alert('验证成功');
     }else{
     alert('验证失败');
     }
    }
    $useId.onclick = getStr;
    $btn.onclick = checkCode;
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 #Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 #Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
微信小程序模板之分页滑动栏
Feb 10 #Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
显示、隐藏密码
2006/07/01 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
JavaScript如何操作css
2020/10/24 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
python图形绘制奥运五环实例讲解
2019/09/14 Python
python实现简单成绩录入系统
2019/09/19 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
Delphi笔试题
2016/11/14 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
颐和园导游词400字
2015/01/30 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
Golang 遍历二叉树
2022/04/19 Golang