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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Html5生成验证码的示例代码
May 10 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
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
深入了解js原型模式
2019/05/30 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
服务员岗位职责
2014/01/29 职场文书
银行委托书范本
2014/09/28 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
golang生成并解析JSON
2022/04/14 Golang