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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 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抓即时股票信息
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python基础教程之字典操作详解
2014/03/25 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
基于Python log 的正确打开方式
2018/04/28 Python
python同步windows和linux文件
2019/08/29 Python
Python安装OpenCV的示例代码
2020/03/05 Python
python regex库实例用法总结
2021/01/03 Python
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
主持人婚宴答谢词
2014/01/28 职场文书
领导调研接待方案
2014/02/27 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
小学生操行评语大全
2014/04/22 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
关于环保的宣传稿
2015/07/23 职场文书