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 添加/移除CSS类实现代码
Feb 11 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
javascript常用函数(1)
Nov 04 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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中使用XML
2006/10/09 PHP
多数据表共用一个页的新闻发布
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
详解python UDP 编程
2020/08/24 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Jar包的作用是什么
2014/03/30 面试题
学校万圣节活动方案
2014/02/13 职场文书
教师节促销方案
2014/03/22 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
商务经理岗位职责
2014/07/30 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
使用CSS连接数据库的方式
2022/02/28 HTML / CSS