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 相关文章推荐
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
JSONP 的原理、理解 与 实例分析
May 16 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
vue实现分页栏效果
2019/06/28 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python logging日志模块的详解
2017/10/29 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
长辈证婚人证婚词
2014/01/09 职场文书
学校捐书倡议书
2015/04/27 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书