js--实现随机验证码

最新推荐文章于 2023-06-16 13:06:50 发布
最新推荐文章于 2023-06-16 13:06:50 发布
阅读量245 收藏 4
点赞数 1
分类专栏： 前端基础。 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44892520/article/details/100066050
版权

在这里插入图片描述
随机验证码生成

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .str-block {
            width: 200px;
            height: 50px;
            line-height: 50px;
            border: 1px solid black;
            display: inline-block;
            background-image: url("./img/bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            text-align: center;
            overflow: hidden;
        }

        .str-block > span {
            display: inline-block;
        }

        .look {
            display: inline-block;
            color: blue;
            font-size: 13px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div>
    <div class="str-block">

    </div>
    <span class="look">看不清楚...</span>
</div>
<input type="text" id="txt"/>
<button id="btn">验证</button>
<script>
    /*
     * 总共6位
     * 随机生成数字0-9
     * */
    var str = "";
    function showchar() {
        str = "";
        var ele = "";
        for (var i = 0; i < 6; i++) {
            var gai = Math.random();
            if (gai <= 0.25) {
                ele += randomnumber();
            }
            else if (gai > 0.25 && gai <= 0.5) {
                ele += randomsmallchar();
            }
            else if (gai > 0.5 && gai <= 0.75) {
                ele += randombigchar();
            }
            else {
                ele += randomhan();
            }
        }
        return ele;
    }
    //生成随机颜色
    function randomColor() {
        var c = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
        var s = "";
        for (var i = 0; i < 6; i++) {
            s += c[Math.floor(Math.random() * c.length)];
        }
        return "#" + s;
    }
    function randomnumber() {
        var s = Math.floor(Math.random() * 10);
        str += s;
        //生成大小
        var font = Math.floor(Math.random() * 25 + 15);
        var color = randomColor();
        var marleft = Math.floor(Math.random() * 3 + 5);
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + s + "</span>";
    }
    function randomsmallchar() {
        var s = Math.floor(Math.random() * 26 + 97);
        str += String.fromCharCode(s);
        var font = Math.floor(Math.random() * 25 + 15);
        var color = randomColor();
        var marleft = Math.floor(Math.random() * 3 + 5);
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + String.fromCharCode(s) + "</span>";

    }
    function randombigchar() {
        var s = Math.floor(Math.random() * 26 + 97);
        str += String.fromCharCode(s).toUpperCase();
        var font = Math.floor(Math.random() * 25 + 15);
        var color = randomColor();
        var marleft = Math.floor(Math.random() * 3 + 5);
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);margin:0 " + marleft + "px;font-size: " + font + "px; color:" + color + ";'>" + String.fromCharCode(s).toUpperCase() + "</span>";

    }
    function randomhan() {
        var string = "中国语言文字网将由教育部语言文字应用研究所主办和运行管理,新网站访问入口更改";
        var s = string.charAt(Math.floor(Math.random() * string.length));
        str += s;
        var font = Math.floor(Math.random() * 20 + 15);
        var color = randomColor();
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return "<span style='transform:rotatez(" + angle + "deg);font-size: " + font + "px; color:" + color + ";'>" + s + "</span>";

    }
    window.onload = function () {

        var sblock = document.getElementsByClassName("str-block")[0];
        var look = document.getElementsByClassName("look")[0];
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");

        sblock.innerHTML = showchar();
        look.onclick = function () {
            sblock.innerHTML = showchar();
        }
        btn.onclick = function () {
            var user = txt.value;
            if (user.toLowerCase() == str.toLowerCase()) {
                alert("验证成功！")
            }
            else {
                alert("验证失败！");
                sblock.innerHTML = showchar();
                txt.value = "";
            }
        }
    }
</script>
</body>
</html>

简单的数据分页
在这里插入图片描述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .b1 > ul {
            display: inline-block;
        }

        .b1 > ul > li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid silver;
        }

        .b1 > button {
            width: 100px;
            height: 30px;
            border: 1px solid silver;
            background: transparent;
            outline: none;
        }

        .bgcolor {
            background: #32bcff;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="b1">
    <button id="uppage">上一页</button>
    <ul class="menu">
        <li class="bgcolor">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <button id="downpage">下一页</button>
</div>
<script>
    var uppage = document.getElementById("uppage");
    var downpage = document.getElementById("downpage");
    var menu = document.getElementsByClassName("menu")[0].children;
    downpage.onclick = function () {
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) + 10;
        }
    }
    uppage.onclick = function () {
        if (parseInt(menu[0].innerHTML) <= 1) {
            return;
        }
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) - 10;
        }
    }
    for (var i = 0; i < menu.length; i++) {
        menu[i].onclick = function () {
            for (var k = 0; k < menu.length; k++) {
                menu[k].className = "";
            }
            this.className = "bgcolor";
        }
    }
</script>
</body>
</html>

在这里插入图片描述
简单的三级联动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       select{
           border: 1px solid #000000;
           width: 100px;
           outline: none;
           height: 30px;
       }
        option{
            color: #000000;
        }
    </style>
</head>
<body>
省：<select id="s1">
    <option>—请选择—</option>
</select>
市：<select id="s2">
    <option>—请选择—</option>
</select>
区：<select id="s3">
    <option>—请选择—</option>
</select>
<script>
    /*
     * json  数据模拟后台数据
     * */
    var city = [
        {
            "id": 10001,
            "name": "陕西省",
            "child": [
                {
                    "id": 100011,
                    "name": "西安市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "未央区"
                        },{
                            "id": 100011,
                            "name": "莲湖区"
                        },
                        {
                            "id": 100011,
                            "name": "碑林区"
                        }
                    ]
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "成仓区"
                        }
                    ]
                }
            ]
        },
        {
            "id": 10002,
            "name": "云南省",
            "child": [
                {
                    "id": 100021,
                    "name": "大理市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "大理市区1"
                        },
                        {
                            "id": 100021,
                            "name": "大理市区2"
                        }
                    ]
                },
                {
                    "id": 100022,
                    "name": "丽江市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "丽江市区1"
                        },
                        {
                            "id": 100021,
                            "name": "丽江市区2"
                        }
                    ]
                },{
                    "id": 100022,
                    "name": "西双版纳市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "西双版纳市区1"
                        },
                        {
                            "id": 100021,
                            "name": "西双版纳市区2"
                        }
                    ]
                },{
                    "id": 100023,
                    "name": "昆明市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "昆明市区1"
                        },
                        {
                            "id": 100021,
                            "name": "昆明市区2"
                        }
                    ]
                }
            ]
        }
    ]
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");
    var s3= document.getElementById("s3");
    for (var i = 0; i < city.length; i++) {
        var opt = new Option(city[i].name,i);
        s1.appendChild(opt);
    }
    //添加事件
    var cityname=null;
    s1.onchange=function (){
        //s2做个清除
        s2.options.length=1;
        //s3做个清除
        s3.options.length=1;
        var index=this.value;
        cityname=city[index].child;
        for(var i=0;i<cityname.length;i++)
        {
            var opt=new Option(cityname[i].name,i);
            s2.appendChild(opt);
        }
    }
    s2.onchange=function (){
        //s3做个清除
        s3.options.length=1;
        var index=this.value;
        var qu=cityname[index].child;
        for(var i=0;i<qu.length;i++)
        {
            var opt=new Option(qu[i].name,i);
            s3.appendChild(opt);
        }
    }
</script>
</body>
</html>
等待戈多的莱昂纳多
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Javascript实现随机验证码
StartQi的博客
09-06 2801
用Javascript实现随机验证码思路：这个脚本和的思路是差不多的。先把，再应用下的几个生成随机数，利用循环4次，到每次循环的后面即可。
js随机生成验证码
y1815151的博客
10-29 1421
实现原理 　　1. html：一般就是一个div：<divid="code"></div>，样式根据需求设计。 　　2.JS：1）将所有的验证码所用的字符放在一个字符串中 　　　　　 2）在这个字符串的字符个数以内，随机生成索引号 　　　　　3）根据索引号查找对应字符，拼接成验证码的字符串 代码实现 HTML： <div id="code"></div> 效果图 CSS： 1 * { 2 margi...
js 实现 点击图片刷新 验证码 看不清 换一张
笼中鸟
12-10 4361
第一种：js和html语句分离 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换二维码</title> <script type="text/javascript"> window.onload=function(){ //获取img标签的对象 img=document.getElementById("exchangecode");
js 实现 图片刷新 验证码 看不清 换一张
热门推荐
uikoo9的专栏
11-29 5万+
【需求】 html+js实现html中一个图片刷新但是整个页面不刷新，或者是验证码刷新。 不使用jsp，不使用ajax，不使用js框架。 【原理】 当一个的src改变时，页面会自动刷新这个 【实现代码】 test function reImg(){ var img = document.getElementById("Img");
用JS生成随机验证码（超简单代码）
babybabyyu的博客
07-29 6089
下面我们来用DOM操作写出一个随机的验证码 当前页面会显示一个区域和一个生成验证码的按钮 每次点击按钮时会随机产生四位验证码。最终效果如下： HTML基本结构如下： <div id="code"></div> <button onclick="creatCode()">验证码</button> CSS样式如下： #code{ width: 110px; height: 50px; background-color: #649
JS使用随机数生成随机验证码
05-31 962
JS使用随机数生成随机验证码
JS实现随机验证码
weixin_41105030的博客
01-08 1579
验证码 验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的。这里我们使用JS来模拟验证码。 生成一个随机四位数的验证码 需求：随机生成一个包含字母或数字的四位数验证码 思路 思路一 我们可以定义一个包含所有数字和字母的字符串str 获取它的长度str.length 在[0,str.length-1]的区...
js实现网页随机验证码
01-18
本文实例为大家分享了js实现网页随机验证码的具体代码，供大家参考，具体内容如下 1、现在全选网站为了防止用户利用机器人自动注册、登录、灌水，采用了验证码技术。所谓验证码，就是系统将一串随机产生的数字或符号...
JS 实现随机验证码功能
10-20
验证码验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能，需要的朋友参考下
JavaScript实现随机五位数验证码
12-13
本文实例为大家分享了js实现随机五位数验证码的具体代码，供大家参考，具体内容如下 功能展示： 点击按钮，随机生成数字+大小写字母验证码 所有代码： <!DOCTYPE html> <html> <head> <meta ...
JS生成随机验证码
02-05
随机生成验证码 支持点击刷新 验证正确性 JavaScript编写
js实现随机数字字母验证码
10-19
主要为大家详细介绍了js随机验证码的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js创建随机验证码
最新发布
grx1125的博客
06-16 1614
通过前端 javascript、canvas、自动生成验证码
使用JavaScript实现很简单的随机验证码的生成以及验证
weixin_54479067的博客
11-03 3216
随即生成验证码，实现了随机生成、验证、随机背景色
原生JS实现随机验证码,包含输入框验证
qq_52619560的博客
07-28 578
一.代码展示使用画布进行验证码的展示第一步获取元素第二步获取绘制对象第三步封装函数获取画布内容的位置第四步画线第五步给元素添加点击事件。
4位随机简单验证码的JS实现
min_0329的博客
01-29 1万+
验证码是用来区分人和计算机的，通常通过模糊字符、拼图等形式达到让人能看懂且计算机无法识别的效果。我们采用验证码是为了防止机器不断登录的现象，比如现实生活中的刷票、刷帖、灌水等。在本篇用JS实现4位简单网页验证码，当然这是最基础的验证码，安全性比较低。 以下是HTML的代码： 验证码： 看不清楚，换一张 给呈现验证码的文本框添加 disabl
js简单验证码的生成和验证
@林笑笑
07-05 1万+
如何用js生成简单验证码，并验证是否正确的方法 1、html页面如下 <div> <table border="0" cellspacing="5" cellpadding="5" > <tr> <td> <div id="checkCode" class="code" onclick="...
JS实现伪验证码的几种方式
passport_daizi的博客
09-12 6184
1： ? + ? =  ? 的方式
javascript简单实现随机生成验证码
Lau的博客
11-20 1140
function idCode(num){ var str = "hghduiqhauihuiqhuihuihiuhijiuQIUHUWHGQUIHDUIHJAIFJKAHUIXCHIOHO122356734894059" //定义一串字符串 var ch =""; //定义一个空字符串，方便后面放验证码 for(var i=0; i < num; i++){ //设置一个循环，循环范围由
用div和dutton和JavaScript实现点击验证码生成随机验证码
06-10
2. 在 JavaScript 中定义一个函数，用于生成随机验证码并显示在 div 元素中。 ```javascript function generateCaptcha() { // 生成随机验证码 var captcha = ""; var possible = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值