前端互动技巧-优快云博客

本文介绍了一系列前端开发中的实用交互技巧，包括密码框显示切换、广告开关控制、文本框默认文字隐藏与显示、全选按钮功能实现、鼠标悬停变色、图片点击更换背景及Tab导航的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、页面密码框点击眼睛显示密码功能

css代码：

.head {
            width: 180px;
            height: 30px;
            position: relative;
        }

        input {
            width: 180px;
            height: 30px;
            border: 1px solid black;
        }

        .head i {
            width: 20px;
            height: 16px;
            position: absolute;
            top: 9px;
            right: 3px;

        }

        .head i.open {
            background: url(./img/open.png);
        }

        .head i.close {
            background: url(./img/close.png);
        }

html代码：

<div class="head">
        <input type="password">
        <i class="close"></i>
    </div> -->

js代码：

        var pass = document.querySelector("input");
        var img = document.querySelector(".close");
        var flag = true;
        img.onclick = function () {
            flag = !flag;
            if (flag) {
                this.className = "open";
                pass.type = "text";
            } else {
                this.className = "close";
                pass.type = "password";
            }

效果：

二、关闭广告与打开广告

css代码：

 .back {
            position: fixed;
            top: 30%;
            right: 10%;
            background-color: palegreen;
            width: 100px;
            height: 300px;
        }

html代码：

 <div class="back">
        <a href="#" id="aaa">关闭</a>
    </div>

js代码;

 <script>
        //3
        var close = document.getElementById("aaa");
        var img1 = document.querySelector(".back");
        close.onclick = function () {
            img1.style.display = "none";
        }

        4
        var id = document.getElementById("name");
        id.onfocus = function () {
            if (id.value == "输入名字") {
                id.value = "";
            }
        }
        id.onblur = function () {
            if (id.value == "") {
                id.value = "输入名字"
            }
        }

    </script>

效果：

三、文本框获得焦点时，里面的默认文字隐藏，焦点离开文本时显示文字。

html代码：

 <input type="text" value="请输入用户名" id="name">

JS代码：

 <script>
        var username = document.getElementById("name");
        //获得焦点事件
        username.onfocus = function () {
            if (this.value == "请输入用户名") {
                this.value = "";
            }
        }
        //失去焦点事件
        username.onblur = function () {
            if (this.value == "") {
                this.value = "请输入用户名";
            }
        }
    </script>

效果：

四：全选按钮
1：点击全选按钮，其他所有复选框都被选中。
2：复选框中有一个未选中，全选按钮选中状态也消失。

html代码：

 <table border="1" cellspacing="0" align="center">
        <tr>
            <th id="aaa">
                <input type="checkbox">全选/全不选
            </th>
        </tr>
        <tr>
            <td id="bbb">
                <input type="checkbox">1
            </td>
        </tr>
        <tr>
            <td id="bbb">
                <input type="checkbox">2
            </td>
        </tr>
        <tr>
            <td id="bbb">
                <input type="checkbox">3
            </td>
        </tr>
        <tr>
            <td id="bbb">
                <input type="checkbox">4
            </td>
        </tr>
    </table>

JS代码：

 <script>
        var all = document.querySelector("#aaa input");
        var one = document.querySelectorAll("#bbb input");
        //全选/全不选
        all.onclick = function () {
            var check = this.checked;
            for (var i = 0; i < one.length; i++) {
                one[i].checked = check;
            }
        }
        //one按钮
        for (var i = 0; i < one.length; i++) {
            one[i].onclick = function () {
                var flag = true;//默认为true
                for (var i = 0; i < one.length; i++) {
                    if (!one[i].checked) {
                        flag = false;
                    }
                }
                all.checked = flag;
            }
        }
    </script>

效果：

五、鼠标放入列表上变颜色

css代码：

 td {
            width: 60px;
            text-align: center;
        }

HTML代码：

 <table border="1" cellspacing="0" align="center">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>

JS代码：

 <script>
        var back = document.querySelector("table");
        var back = document.querySelectorAll("tr");
        for (var i = 0; i < back.length; i++) {
            back[i].onmouseover = function () {
                this.style.background = "pink";
            }
            for (var j = 0; j < back.length; j++) {
                back[i].onmouseout = function () {
                    this.style.background = "white";
                }
            }
        }
    </script>

效果：

六、页面上有N张图片,单击任意一张，body背景图片也随之更换。

css代码：

  .hezi {
            text-align: center;
        }

        .hezi img {
            width: 200px;
            height: 150px;
        }

html代码：

 <div class="hezi">
        <img src="./img/Kitchen Open Late.png" alt="">
        <img src="./img/wyy1.png" alt="">
        <img src="./img/wyy5.png" alt="">
        <img src="./img/wyy6.png" alt="">
        <img src="./img/与一月想谁.png" alt="">
    </div>

JS代码：

 <script>
        var box = document.querySelectorAll(".hezi img");

        for (var i = 0; i < box.length; i++) {
            box[i].onclick = function () {
                var src = this.src;
                document.body.style.backgroundImage = "url(' " + src + " ')";
            }
        }
    </script>

效果:

七、Tab交互思路
1：点击nav a标签，都把样式改为灰色。
2：当前的这个a变色。

css代码：

 .box a {
            display: block;
            float: left;
            margin-right: 10px;
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #999;
            color: white;
            text-decoration: none;
        }

        .box .hover {
            background-color: black;
        }

html代码：

  <div class="box">
        <a href="#">一二三四</a>
        <a href="#">一二三四</a>
        <a href="#">一二三四</a>
        <a href="#">一二三四</a>
        <a href="#">一二三四</a>
    </div>

JS代码：

<script>
        var all = document.querySelectorAll(".box a");

        for (var i = 0; i < all.length; i++) {
            all[i].onclick = function () {
                for (var j = 0; j < all.length; j++) {
                    all[j].className = "";
                }
                this.className = "hover";
            }
        }
    </script>

效果:

DOM基础程序