javascript随机验证码

川长思鸟来 2022-01-28 00:29 331阅读 0赞

## 随机验证码 ##

#box {
                width: 100px;
                height: 40px;
                background: #b0b0b0;
                text-align: center;
                line-height: 40px;
                font-size: 30px;
                margin: 50px auto;
    
            }

<div id="box">RG8g</div>

var box = document.getElementById('box');
            var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'A', 'B', 'C', 'D', 'E', 'F', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; //0-21
            var strr = "qwertyuiopasdfghjklzcvnmQWERTYUIOPASDFGHKLZXCVBNM1234567890";
    
            // 这是一个命名函数：封装一段代码，创建的时候不会运行
            function change() {
                var str = '';
                for (var i = 0; i < 4; i++) {
                    var index = Math.round(Math.random() * (strr.length - 1));
                    var fs = Math.round(Math.random() * (30 - 12) + 12);
                    var r = Math.round(Math.random() * 255);
                    var g = Math.round(Math.random() * 255);
                    var b = Math.round(Math.random() * 255);
                    str = str + "<span style='font-size:" + fs + "px;color:rgb(" + r + "," + g + "," + b + ");'>" + strr[index] + "</span>";
                    //'<span style="color:rgb('+ +','+ +','+ +');font-size:'+ +'px;">'+  strr[index] +'</span>'
                }
                box.innerHTML = str;
            }
            //运行函数
            change();
    
            box.onclick = function () {
                change();
            }

效果图  
![在这里插入图片描述][20190522193754510.jpg]

[20190522193754510.jpg]: /images/20220128/a51682f860a24734a58151d2debee83d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现随机验证码并验证

前言在许多登录页面里，我们都可以看到验证码的身影，每次登录都需要重新输入验证码。这个功能非常重要，它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不

àì夳堔傛蜴生んèń/ 2023年01月13日 15:00/ 0 赞/ 237 阅读

相关 uni - 随机验证码

样式：  <view class="canvas-img-code" @click="refresh()"> <ca

本是古典何须时尚/ 2022年12月04日 07:52/ 0 赞/ 206 阅读

相关随机验证码函数

// 验证码函数 function randomCode(num) \{ var str = 'qwertyuioplkjhgfdsazxcvbnm12345678

客官°小女子只卖身不卖艺/ 2022年09月10日 04:19/ 0 赞/ 246 阅读

相关随机生成验证码

//login.jsp加入 <dt>验证码</dt> <dd> <input type="text" name="c

蔚落/ 2022年05月14日 14:28/ 0 赞/ 444 阅读

相关 java 生产运算验证码&随机验证码

public class ValidateCodeUtil { // 图片的宽度。 private int width = 160;

雨点打透心脏的1/2处/ 2022年05月09日 13:03/ 0 赞/ 328 阅读

相关随机验证码的生成

随机验证码的生成（手机或者邮箱验证码）先写了个随机验证码的工具类 public class Randomutil \{ private Randomutil() \

怼烎@/ 2022年05月08日 10:22/ 0 赞/ 388 阅读

相关 JS实现随机验证码

验证码验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的

待我称王封你为后i/ 2022年03月29日 09:41/ 0 赞/ 452 阅读

相关 javascript随机验证码

随机验证码 box { width: 100px; height: 40px;

川长思鸟来/ 2022年01月28日 00:29/ 0 赞/ 332 阅读

相关【验证码】PHP生成随机验证码

<?php // Header("Content-type: image/gif"); / 初始化 / $bo

本是古典何须时尚/ 2021年09月26日 02:36/ 0 赞/ 601 阅读

相关前端随机验证码

[前端随机验证码 ][Link 1] 前端登录或者注册的时候经常会有一个验证码，数字或者字母，本验证码是基于canves的。使用方法： <!DOCTY

蔚落/ 2021年09月02日 05:12/ 0 赞/ 505 阅读