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 select操作的日期联动实现代码
Dec 06 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 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的memcached客户端memcached
2011/06/14 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
JS读取XML文件示例代码
2013/11/15 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
javascript代码优化的8点总结
2018/01/29 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
微信小程序实现星级评分和展示
2018/07/05 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python getopt详解及简单实例
2016/12/30 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Django Rest framework频率原理与限制
2019/07/26 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
个人简历自我评价
2014/02/02 职场文书
玲玲的画教学反思
2014/02/04 职场文书
献爱心标语
2014/06/21 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
家庭贫困证明
2014/09/23 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
教师节祝酒词
2015/08/11 职场文书
护士工作心得体会
2016/01/25 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
python可视化之颜色映射详解
2021/09/15 Python