JavaScript小案例

最新推荐文章于 2022-07-30 11:47:24 发布

MR. Dong

最新推荐文章于 2022-07-30 11:47:24 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_44614406/article/details/86937955

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了前端开发中的四个实用技巧：鼠标悬停颜色变化、跑马灯文字滚动效果、菜单项的隐藏显示及表格中复选框的全选、反选和取消功能。通过这些实例，读者可以学习到如何运用CSS和JavaScript实现常见的网页交互效果。

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

1，鼠标放到字体上时改变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR. Dong</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /* 当鼠标移动到当前标签上时，一下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w"></div>
    </div>
</body>
</html>

在这里插入图片描述
2，跑马灯效果，一个字符串不断地循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR. Dong</title>
</head>
<body>
    <div id="i1">你好世界！</div>
    <script>

        function func(){
            // 根据ID获取指定标签的内容,定义局部变量接收
            var tag = document.getElementById('i1');
            // 获取标签内部的内容
            var content = tag.innerText;

            var f = content.charAt(0);
            var l = content.substring(1,content.length);

            var new_content = l + f;

            tag.innerText = new_content;

        }

        setInterval('func()',1000)

        // function f1(){
        //     console.log(123)
        // }
        // 创建一个定时器
        // setInterval("alert('Hello World!');",2000);
        // setInterval("f1()",2000)
    </script>
</body>
</html>

在这里插入图片描述

3，菜单隐藏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR. Dong</title>
    <style>
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>

</head>
	<body>
	    <div style="height: 48px;"></div>
	    <div style="width: 300px;">

        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1')">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>

    <script>
        function ChangeMenu(nid) {
            var current_header = document.getElementById(nid);
            var item_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide')
            }
            current_header.nextElementSibling.classList.remove('hide')
        }
    </script>
</body>
</html>

在这里插入图片描述
4，添加，全选，反选，取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MR. Dong</title>

    <style>
        .hide{
            display: none;
        }

        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }


    </style>
</head>
<body style="margin: 0;">
    <div>
        <input type="button" value="添加" onclick="ShowModel()"/>
        <input type="button" value="全选" onclick="ChooseAll()"/>
        <input type="button" value="取消" onclick="CancleAll()"/>
        <input type="button" value="反选" onclick="ReverseAll()"/>
        <table>
            <thead>
                <tr>
                    <th>请选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>

            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.1</td>
                    <td>191</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class='c1 hide'></div>
    <!-- 遮罩层结束 -->

    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p><input type="button" value="确定" /></p>
        <p><input type="button" value="取消" onclick="HideModel()" /></p>

    </div>
    <!--弹出框结束-->

    <script>
        function ShowModel(){
            document.getElementById("i1").classList.remove('hide');
            document.getElementById("i2").classList.remove('hide');
        }
        function HideModel(){
            document.getElementById("i1").classList.add('hide');
            document.getElementById("i2").classList.add('hide');
        }
        function ChooseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i <tr_list.length;i++){
                // 循环所有的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }
        function CancleAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i <tr_list.length;i++){
                // 循环所有的tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i < tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){
                    checkbox.checked = false;
                }else{
                    checkbox.checked = true;
                }
            }
        }

    </script>
</body>
</html>

在这里插入图片描述
PS:
将来的你，一定会感谢现在拼命的自己。