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 前的按键判断代码
Mar 19 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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语法(3)
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
中止javascript执行的方法
2014/02/14 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
vue多次循环操作示例
2019/02/08 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
python怎么调用自己的函数
2020/07/01 Python
网页设计个人找工作求职信
2013/11/28 职场文书
学校后勤人员职责
2013/12/27 职场文书
业务员的岗位职责
2014/03/15 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
python井字棋游戏实现人机对战
2022/04/28 Python