2019.6.22 Web全栈开发学习笔记（十四）

SkywalkerHD

已于 2023-06-29 10:06:33 修改

阅读量184

点赞数

分类专栏：学习笔记文章标签：前端学习笔记

于 2019-09-11 20:09:55 首次发布

本文链接：https://blog.csdn.net/weixin_44363959/article/details/100747598

版权

学习笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

JavaScript Day 7

上课日期：2019年8月20日

课程内容

一、案例：三级联动

三级联动常见于注册，或者是选择地区时出现的省市区选择操作，在选择省份后选择城市，其会自动转换为该省份下辖的所有城市，同理，在选择县区的时候，也会自动转换为当前城市的下辖县区，以下案例就是用纯js实现的对模拟省市区数据的三级联动操作。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</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": 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"
                        }
                    ]
                }
            ]
        }
    ]
    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>

二、案例：纯JS实现随机验证码

验证码是网页上很常见的元素，实现方式多种多样，本案例是用纯js实现的使用随机数字，随机颜色和随机汉字，形成一个由彩色数字和彩色字符构成的验证码，并实现验证功能，输入一致时验证通过。

<!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>

SkywalkerHD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019.6.22 Web全栈开发学习笔记（十四）

JavaScript Day 7上课日期：2019年8月20日课程内容一、案例：三级联动<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body>省：...
复制链接

扫一扫