WebAPI编程--第二篇DOM--案例补充

案例1：实现密码框格式错误提醒

分析：

1、首先判断的事件是表单失去焦点onblur

2、如果输入正确则提示正确的信息颜色为绿色的图标

3、如果不是规定格式，则提示错误信息颜色为红色，图标也改变

4、因为里面的样式变化较多，采用className修改样式

    <div class="register">
        <input type="password" class="psw">
        <img src="提示.png" class="warn">
        <p class="message">请输入6~16位数字</p>
    </div>
    <script>
        //1.获取元素
        var ipt = document.querySelector(".psw");
        var img = document.querySelector(".warn");
        var message = document.querySelector(".message");
        //2.注册事件 程序处理
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                img.src = "错误.png";
                message.className = "message wrong";
                message.innerHTML = "您输入的格式有误！";
            } else {
                img.src = "正确.png";
                message.className = "message right";
                message.innerHTML = "您输入的格式正确！";
            }
        }
    </script>

 注意：

1、矢量图地址：https://www.iconfont.cn/

2、p标签的类名要在message的基础上加上wrong或者right，才能实现替代的效果

案例2：做一个登录页面如下要求

要求：

1、点击账号输入框，账号俩个字隐藏，如果点击其他地方（失去焦点），发现输入为空，则输入框变红色，并在右侧显示红色字体请输入账号

2、密码如上，增加睁眼闭眼按钮

    <div>
        <h3>登录页面</h3>
        <input type="text" name="num" id="num" value="账号">
        <br>
        <input type="password" name="psw" id="psw">
        <label for="">
            <img src="隐藏.png" alt="" id="eye">
        </label>
        <br>
        <img src="提示.png" id="warn">
        <p class="message">账号登录！请输入6~16位数字</p>
    </div>
    <script>
        //1.获取元素
        var num = document.getElementById("num");
        var psw = document.getElementById("psw");
        var eye = document.getElementById("eye");
        var message = document.querySelector(".message");
        //2.注册事件
        var flag = 0;
        eye.onclick = function () {
            //点击一次之后，flag一定要改变
            if (flag === 0) {
                psw.type = "text";
                eye.src = "显示.png";
                flag = 1;
            } else {
                psw.type = "password";
                eye.src = "隐藏.png";
                flag = 0;
            }
        }
        num.onfocus = function () {
            if (num.value === "账号") {
                this.value = "";
            }
            //得到焦点把颜色变深
            this.style.color = "#333";
            this.style.border = "1px solid red";
            this.style.outline = "none";
        }
        //注册事件 失去焦点 onblur 
        num.onblur = function () {
            if (num.value === "") {
                this.value = "账号";
            }
            //失去焦点把颜色变浅
            this.style.color = "#999";
            this.style.border = "1px solid #999";
            this.style.outline = "thin";
        }
        psw.onfocus = function () {
            //得到焦点把颜色变深
            this.style.border = "1px solid red";
            this.style.outline = "none";
        }
        psw.onblur = function () {
            //失去焦点把颜色变浅
            this.style.color = "#999";
            this.style.border = "1px solid #999";
            this.style.outline = "thin";
            if (this.value.length < 6 || this.value.length > 16) {
                warn.src = "错误.png";
                message.className = "message wrong";
                message.innerHTML = "您输入的格式有误！";
            } else {
                warn.src = "正确.png";
                message.className = "message right";
                message.innerHTML = "您输入的格式正确！";
            }
        }
    </script>

注意：

如何改变input点击后的边框颜色：

（CSS伪类法）

#psw:focus {

            outline: none;

            border: 1px solid red;

        }

#num:focus {

            outline: none;

            border: 1px solid red;

        }

（js方法函数onfocus、onblur）

如代码中所示

案例三：开关灯按钮

    <div id="box">
        <button type="button" id="btn">按钮</button>
    </div>
    <script>
        var btn = document.getElementById("btn");
        var div = document.getElementById("box");
        var flag = 0;
        //注册事件
        btn.onclick = function () {
            if (flag === 0) {
                div.style.backgroundColor = "black";
                flag = 1;
            } else {
                div.style.backgroundColor = "white";
                flag = 0;
            }
        }
    </script>

注意：

如果想让div铺满整个浏览器界面，可以写CSS如下：

<style>

        * {

            margin: 0;

            padding: 0;

        }

 

        div {

            width: 100%;

            height: 100%;

            background-color: white;

            position: fixed;

        }

    </style>

案例四：下拉菜单

因为之前自己写的二级菜单也忘了，所以移步参考大佬：https://www.cnblogs.com/wuqianling/p/6762146.html