JS案例复习-day01

最新推荐文章于 2026-02-21 17:56:15 发布

原创最新推荐文章于 2026-02-21 17:56:15 发布 · 197 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文深入解析三个JavaScript实战案例：密码验证与显示切换、百度换肤效果实现及购物车全选与单选功能，涵盖DOM操作、事件监听、条件判断等核心技术。

JS案例复习-day01

1、仿注册页面输入密码判断与显示隐藏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .message {
        position: relative;
        display: inline-block;
        width: 200px;
        font-size: 12px;
        color: #999;
        background: url(images/mess.png) no-repeat left center;
        padding-left: 20px;
      }
      #eye {
        position: absolute;
        left: 140px;
        top: 14px;
        width: 30px;
        height: 30px;
      }
      .wrong {
        color: red;
        background-image: url(images/wrong.png);
      }

      .right {
        color: green;
        background-image: url(images/right.png);
      }
    </style>
  </head>

  <body>
    <div class="register">
      <label for="">
        <img src="images/close.png" alt="" id="eye" />
      </label>
      <input type="password" class="ipt" />
      <p class="message">请输入6~16位密码</p>
    </div>
    <script>
      // 首先判断的事件是表单失去焦点 onblur
      // 如果输入正确则提示正确的信息颜色为绿色小图标变化
      // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
      // 因为里面变化样式较多，我们采取className修改样式
      // 1.获取元素
      var eye = document.getElementById('eye');
      var ipt = document.querySelector('.ipt');
      var message = document.querySelector('.message');
      //2. 注册事件 失去焦点
      ipt.onblur = function () {
        // 根据表单里面值的长度 ipt.value.length
        if (this.value.length < 6 || this.value.length > 16) {
          // console.log('错误');
          message.className = 'message wrong';
          message.innerHTML = '您输入的位数不对要求6~16位';
        } else {
          message.className = 'message right';
          message.innerHTML = '您输入的正确';
        }
      };
      var flag = 0;
      eye.onclick = function () {
        // 点击一次之后， flag 一定要变化
        if (flag == 0) {
          ipt.type = 'text';
          eye.src = 'images/open.png';
          flag = 1; // 赋值操作
        } else {
          ipt.type = 'password';
          eye.src = 'images/close.png';
          flag = 0;
        }
      };
    </script>
  </body>
</html>

核心要点：

1、点击眼睛图片后，根据flag值修改input框的type和图片的src，同时修改flag值。

2、鼠标移出input框判断当前input框内的值的长度是否符合相应要求，同时根据判断情况添加相关class类

2、百度换肤效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
    </style>
</head>
<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>
</html>

核心要点：

1、获取图片组，通过循环给每个图片都绑定点击事件，点击对应图片，将当前图片的url地址赋值给全局背景

3、购物车的全选与单选*

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>

</head>

<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>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

核心要点：

标签

#javascript