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使用指南之selector.js
Jan 10 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
javascript cookie的简单应用
Feb 24 Javascript
Three.js快速入门教程
Sep 09 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
js定时器实例分享
Dec 20 Javascript
使用webpack打包koa2 框架app
Feb 02 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
浅析php单例模式
2014/11/25 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
python发送伪造的arp请求
2014/01/09 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python内置函数locals和globals对比
2020/04/28 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
SQL Server面试题
2016/10/17 面试题
护理专业的自荐信
2013/10/22 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
上课打牌的检讨书
2014/02/15 职场文书
表扬信范文
2019/04/22 职场文书