JavaScript每日一练经典小案例（一）

最新推荐文章于 2024-05-14 23:26:36 发布

周粥粥ya

最新推荐文章于 2024-05-14 23:26:36 发布

阅读量2.7k

点赞数 4

分类专栏：前端文章标签： javascript css css3

本文链接：https://blog.csdn.net/NITIQ/article/details/122103586

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一、密码显示隐藏效果

先看效果：

通过分析，我们可以看到通过改变文本属性可以实现文本显示

代码实现原理：通过判断眼睛的点击事件改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #flag{
            border: 1px solid red;
            width: 20px;
        }
    </style>
</head>

<body>
    <form>
        账号<input type="text">
        <br>
        密码<input type="password" id="password">
        <h1 id="flag">*</h1>
    </form>

    <!-- js -->
    <script>
        var pw = document.getElementById('password');
        var flag = document.getElementById('flag');
        // 设置临时元素用于判断改变文本属性
        var tp = 0;
        flag.onclick = function () {
            if (tp == 0) {
                pw.type = 'text';
                tp = 1;
            } else {
                pw.type = 'password';
                tp = 0;
            }

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

代码效果

密码显示隐藏效果

二、列表全选和反选效果

先看效果：

列表全选

素材代码

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
 </body>

分析：我们指导checked属性可以控制列表的选择

我们通过将表头的checked属性赋值给下面

js实现代码

<script>
        //上面的j_cbAll选中，下面的j_tb选中
        //利用checkbox属性进行选中
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').querySelectorAll('input');

        j_cbAll.onclick = function () {
            //利用循环改变每个input的checked属性
            for (let i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
 </script>

扩展

反选效果

列表反选

分析下面复选框不选，上面取消选择通过循环判断下面有没有选中。

js代码

        //全选时，下面有取消 全选checked = flse
        for (let i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                // flag 控制全选按钮是否选中
                var flag = true;
               //  每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (let i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs.checked) {
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }

三、tab栏切换

先看效果：

tab栏切换

素材代码

<head>  
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
</body>

第一部分

分析：我们可以看到京东的这个tab栏切换，首先变换了头部标题的颜色和下面商品的内容

那我们也可以拆成两个部分通过点击某个选项卡改变颜色也就是这个class类，其他的清除样式

那就是先清除所有样式在给这个正在点击的标题，提供样式。

js代码

<script>
    var tab_ls = document.querySelector('.tab_list');
        var lis = tab_ls.querySelectorAll('li');
        var divs = document.getElementsByClassName('item');
        //通过循环绑定点击事件
        for (let i = 0; i < lis.length; i++) {
            //点击某个选项卡改变颜色 也就是这个class类 ，其他的清除样式
            lis[i].onclick = function () {
                for (let i = 0; i < lis.length; i++) {
                    //先清除所有的样式
                    lis[i].className = '';
                }
                //在赋值正在点击的选项卡
                this.className = 'current';
</script>

效果：

tab栏切换（一）

第二部分

第一部分实现后，我们可以看到下面的内容没有跟着上面的变化。

通过看源码我们可以指导 item是可以获取到索引的，那如何与上面对应。

我们可以自定义一个index索引通过element.getAttribute()获取

然后再改变 item的display属性进行隐藏和显示

js代码

        var tab_ls = document.querySelector('.tab_list');
        var lis = tab_ls.querySelectorAll('li');
        var divs = document.getElementsByClassName('item');
        //通过循环绑定点击事件
        for (let i = 0; i < lis.length; i++) {
          //第二部分：  给每个li标签设置索引号方便对应Div
            lis[i].setAttribute('index', i);
            
            //第一部分：点击某个选项卡改变颜色 也就是这个class类 ，其他的清除样式
            lis[i].onclick = function () {
                for (let i = 0; i < lis.length; i++) {
                    //先清除所有的样式
                    lis[i].className = '';
                }
                //在赋值正在点击的选项卡
                this.className = 'current';

                //第二部分：获取自定义的索引号
                var index = this.getAttribute('index');
                //console.log(index);
                //同样的思想先清除所有人的样式
                for (let i = 0; i < divs.length; i++) {
                    divs[i].style.display = 'none';
                }
                //在给点击的样式根据Div的索引对应自定义的 显示内容
                divs[index].style.display = 'block';
            }
        }

完整效果：

tab栏切换（二）

周粥粥ya

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript每日一练经典小案例（一）

一、密码显示隐藏效果先看效果：通过分析，我们可以看到通过改变文本属性可以实现文本显示代码实现原理：通过判断眼睛的点击事件改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫