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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 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
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
基于node.js制作简单爬虫教程
2017/06/29 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
jQuery实现本地存储
2020/12/22 jQuery
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
使用python实现rsa算法代码
2016/02/17 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python字符串的常见操作实例小结
2019/04/08 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
const和static readonly区别
2013/05/20 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
大学生未来职业生涯规划书
2014/02/15 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
离婚协议书格式
2015/01/26 职场文书
交通事故和解协议书
2015/01/27 职场文书
求职意向书范本
2015/05/11 职场文书