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 相关文章推荐
javascript之函数直接量(function(){})()
Jun 29 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
完整显示当前日期和时间的JS代码
Sep 17 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
js中开关变量使用实例
Feb 24 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
详解js常用分割取字符串的方法
May 15 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 冒泡排序 交换排序法
2011/05/10 PHP
php记录日志的实现代码
2011/08/08 PHP
php while循环得到循环次数
2013/10/26 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
js实现时间日期校验
2020/05/26 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python构建深度神经网络(DNN)
2018/03/10 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
python模块常用用法实例详解
2019/10/17 Python
python生成器用法实例详解
2019/11/22 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
详解python变量与数据类型
2020/08/25 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
餐饮投资计划书
2014/04/25 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
环保小标语
2014/06/13 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS