JavaScrpit第三章

最新推荐文章于 2024-03-19 19:10:55 发布

nobody\

最新推荐文章于 2024-03-19 19:10:55 发布

阅读量125

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41255880/article/details/84226546

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、数组显示下一级

    <select id="Select1">
        <option>请选择省份</option>
    </select>

    <select id="Select2">
        <option>请选择市级</option>
    </select>

    <select id="Select3">
        <option>请选择县级</option>
    </select>

--分两级

window.onload = function () {
    var sel1 = document.getElementById("Select1");
    var sel2 = document.getElementById("Select3 ");
    var price = new Array(2);
    price["河南"] = ["郑州", "商丘", "南阳"];
    price["山东"] = ["青岛", "济南", "日照"];

    for (var i in price) {
        sel1.options.add(new Option(i, i));
    }

    sel1.onchange = function () {
        sel2.options.length = 0;
        if (sel1.value == "省份") {
            sel2.options.add(new Option("市区", "市区"));
            return;
        }
        for (var i in price[sel1.value]) {
            sel2.options.add(new Option(price[sel1.value][i], price[sel1.value][i]));
        }
    }
}

--分三级

window.onload = function () {
    var sel1 = document.getElementById("Select1");
    var sel2 = document.getElementById("Select2");
    var sel3 = document.getElementById("Select3");
    var price = new Array();
    price["中国"] = ["河南", "湖南", "河北"];

price["中国"]["河南"] = ["郑州", "新乡", "商丘"];
price["中国"]["湖南"] = ["长沙", "古丈", "凤凰"];

    for (var i in price) {
        sel1.options.add(new Option(i, i));
    }

    sel1.onchange = function ()
    {
        sel2.options.length = 1;
        sel3.options.length = 1;

        for (var i = 0; i <price[sel1.value].length; i++) {
            sel2.options.add(new Option(price[sel1.value][i],price[sel1.value][i]));
        }

     }
        sel2.onchange = function () {
            sel3.options.length = 1;
            for (var i = 0; i <price[sel1.value][sel2.value].length; i++) {
                sel3.options.add(new Option(price[sel1.value][sel2.value][i],price[sel1.value][sel2.value][i]));
            }
        }
    }

2、正则表达式验证信息

<center>
    <table>

            <tr>
                <td>
                    帐号：
                </td>
                <td>
                    <input id="txtName" type="text" placeHolder="请输入帐号"/>
                </td>
                <td>
                    *帐号只能为中文
                </td>
            </tr>

                <td>
                    *只能包含字母数字下划线
                </td>

            </tr>

                        <tr>
                <td>
                    邮箱：
                </td>
                <td>
                    <input id="txtEmail" type="text" placeHolder="请输入邮箱"/>
                </td>
                <td>
                    *至少一位以@qq.com结尾
                </td>
            </tr>

</tr>

window.onload = function () {
    var btn = document.getElementById("Submit1");
    var Name = document.getElementById("txtName");
    var Pwd = document.getElementById("txtPwd");
    var Email = document.getElementById("txtEmail");
    var Tel = document.getElementById("txtTel");
    var Month = document.getElementById("txtMonth");
    var Day = document.getElementById("txtDay");

    btn.onclick = function () {
        var name = Name.value;
        var nameReg = /^[\u4e00-\u9fa5]+$/;
        if (nameReg.test(name)) {
            alert("帐号验证成功！");
        }
        var pwd = Pwd.value;
        var pwdReg = /^\w{6,}$/;
        if (pwdReg.test(pwd)) {
            alert("密码验证成功！");
        }

        var email = Email.value;
        var emailReg = /^\w+@qq[.]com$/;
        if (emailReg.test(email)) {
            alert("邮箱验证成功！");
        }

        var tel = Tel.value;
        var tellReg = /^1\d{10}$/;
        if (tellReg.test(tel)) {
            alert("手机验证成功！");
        }

        var month = Month.value;
        var monthReg = /^((0?[1-9]|1[0-2]))$/;
        if (monthReg.test(month)) {
            alert("月份证成功！");
        }

        var day = Day.value;
        var daylReg = /^((0?[1-9])|((1|2)[0-9])|30|31)$/;
        if (daylReg.test(day)) {
            alert("天数验证成功！");
        }
    }
}

3、图片滚动

        var Smalls = document.getElementsByClassName("Small");
        for (var i = 0; i < Smalls.length; i++) {
            Smalls[i].onmouseover = function () {
                Big.src = this.src;
            }
        } </script>
</body>

var Big = document.getElementsByClassName("Big")[0];
Big.src = "3.jpg";

var Smalls = document.getElementsByClassName("Small");
for (var i = 0; i < Smalls.length; i++) {
    Smalls[i].ommouseover = function () {
        Big.src = this.src;
    }
}