JavaScript--验证码随机生成 js验证码插件

   2023-03-08 学习力0
核心提示:在网上看了一下,总结总结!思路:一个文本框,两个按钮,一个点击操作(验证),一个用来显示验证码,页面加载后就显示验证码,点击验证码触发方法,获取新的验证码css样式:style#code {font-family: Arial;font-style: italic;font-weight: bold;border: 0

在网上看了一下,总结总结!

思路:一个文本框,两个按钮,一个点击操作(验证),一个用来显示验证码,页面加载后就显示验证码,点击验证码触发方法,获取新的验证码

css样式:

<style>
        #code {
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            border: 0;
            letter-spacing: 2px;
            color: blue;
        }
    </style>

js代码:

 <script>
        var code;
        function createCode() {
            //首先默认code为空字符串
            newCode = '';
            //设置长度
            var codeLength = 4;
            //获取验证码模块
            var oldCode = document.getElementById('code');
            //设置随机字符
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            //循环codeLength
            for (var i = 0; i < codeLength; i++) {
                //设置随机数范围,Math.random()*36会产生一个[0,36)的数,注意其中包含了小数,例如产生的数为5.5,则math.floor(5.5)=5
                var index = Math.floor(Math.random() * 36);
                //字符串拼接 将每次随机的字符 进行拼接
                newCode += random[index];
            }
            //将拼接好的字符串赋值给展示的Value
            oldCode.value = newCode;
        }
        //一个用来显示验证码,页面加载后就显示验证码,点击验证码触发方法,获取新的验证码
        //按钮点击方法,判断文本框内输入的内容和验证码是否一致
        function validate() {
            var oValue = document.getElementById('input').value.toUpperCase();//toUpperCase() 方法用于把字符串转换为大写。
            if (oValue == 0) {
                alert('请输入验证码');
            } else if (oValue != code) {
                alert('验证码不正确,请重新输入');
                oValue = ' ';
                createCode();
            } else {
                //输入正确后的操作.....
            }
        }

        //页面加载就产生一个验证码
        window.onload = function () {
            createCode();
        }
    </script>

HTML代码:

 <div>
            <div>
                <input type="text" id="input" value="" />
                <input type="button" id="code" onclick="createCode()" />
                <input type="button" value="验证" onclick="validate()" />
            </div>
        </div>
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • JavaScript翻转字符串方法 js翻转一个字符串
    先把字符串转化成数组String.prototype.split(),再借助数组的reverse方法翻转数组顺序(Array.prototype.reverse()),然后把数组转化成字符串。使用的API方法:String.prototype.split(' ')使用指定的分隔符字符串将一个String对象分割成字符串数组Array.prot
    03-08
  • javascript常见面试题之一:将字符串'get-
    var str='get-element-by-id'; function strToupper(str) { //利用split将字符串分割成数组var arr= str.split('-');for (var i = 1; iarr.length; i++) {      //1.利用for循环获取数组的每个元素,2.用charAt(0)获取每个元素的第一个字符;3.用substr
    03-08
  • JavaScript清除空格、换行,把双引号转换成单引号
    JavaScript清除空格、换行,把双引号转换成单引
    1、页面   2、源码 1 !DOCTYPE2 html3 head4meta charset="utf-8"5 title清除字符串的空格和双引号/title6 style type="text/css"7 textarea{8 padding:10px;9 font-size:18px; 10 width:100%; 11 resize:none; 12 } 13 .main{ 14 padding:40px 10px; 15
    03-08
  • javaScript的Date函数 javascript date(
    1、获取当前时间  Date()获取到的时间是当前设备的显示的时间,开发中要考虑到用户的设备时间是否正确let nowTime = new Date(); // 获取当前时间  把data时间转换成常规格式scriptlet getTimeNow = () = {let nowTime = new Date(); // 获取当前时间——
    03-08
  • JavaScript中什么是闭包
    JavaScript中什么是闭包
    概念:当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数  就是一个函数去访问了另外一个函数的中的变量的函数例子:!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title闭包/title/headbodyscript type="text/javascript"//允许函
    03-08
  • 关于Javascript中通过实例对象修改原型对象属性
    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值。基本类型的数据值有5种:null、undefined、number、boolean和string。引用类型的数据值往大的说就1种,即Object类型。往细的说有:Object类型、Array类型、Date类型、Regexp类型、Functio
    03-08
  • javascript中defer的作用(转)
    script src=".js.js" defer/scriptdefer的作用就是作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题 加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活! defer是脚本程序强大功能中的一个“无名英
    03-08
  • JavaScript Array map() 方法
    JavaScript Array map() 方法
    一、定义map() 方法返回一个新数组,不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值,并按照原始数组元素顺序依次处理元素。注意:map() 不会对空数组进行检测。二、语法array.map(function(currentValue,index,arr), thisValue)四、
    03-08
  • JavaScript中的arguments,callee,caller(转)
    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsArguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的 Function 对象的名字。 n :选项。要传递给 Function 对象的从
    03-08
  • 前台javascript排序 js排序的几种方式
     script type="text/javascript"$(function () {$('.Sorthead-ShowUp').click(function () { var filed = $(this).attr("name"); $(".issorting").removeClass("issorting"); $(this).addClass("issorting"); D
    03-08
点击排行