🎯JS部分

😎用户注册表单提交部分

🎈代码

function validateForm() {
    // 获取密码输入框的值
    var password1 = document.forms["registerForm"]["password1"].value;
    var password2 = document.forms["registerForm"]["password2"].value;

    // 检查两次输入的密码是否相同
    if (password1 !== password2) {
        alert("两次密码不同，请重新输入");
        return false; // 阻止表单提交
    }
    return true; // 允许表单提交
}

🎈解析

        这段JavaScript代码定义了一个名为 validateForm 的函数，它用于验证用户在注册表单中输入的密码是否一致：

1. 函数定义:

   • function validateForm() { ... }: 定义了一个名为 validateForm 的函数，没有接受任何参数。

2. 获取表单数据:

   • var password1 = document.forms["registerForm"]["password1"].value;: 获取名为 registerForm 的表单中名为 password1 的输入字段的值。
   • var password2 = document.forms["registerForm"]["password2"].value;: 获取同样表单中名为 password2 的输入字段的值。

3. 密码比较:

   • if (password1 !== password2) { ... }: 使用 !== 操作符检查两次输入的密码是否不相同。

4. 错误提示:

   • alert("两次密码不同，请重新输入");: 如果两次密码不同，则弹出一个警告框提示用户。

5. 阻止表单提交:

   • return false;: 如果密码不一致，函数返回 false，这将阻止表单提交。

6. 允许表单提交:

   • return true;: 如果密码一致，函数返回 true，这允许表单提交。

        这个 validateForm 函数通常在注册表单的 onsubmit 事件中被调用，以确保用户两次输入的密码相同。这是一种常见的前端验证手段，用于增强用户体验和减少无效的表单提交。然而，为了安全性，后端验证也是必需的，因为前端验证可以被绕过。

🎈演示

😎店铺分类模块

🎈代码

// 获取一级菜单
let menuOne = document.querySelectorAll('.menuOne > li');
// querySelectorAll获取出来是类数组，这里的操作是将类数组转为数组
menuOne = [...menuOne];
// 定义一个存放下标的变量
let menuIndex = NaN;
// 遍历给每一个元素添加点击事件
menuOne.forEach((item, index) => {
    // 将下标绑定在元素对象上
    item.index = index;
    // 绑定点击事件
    item.addEventListener('click', function () {
        // 获取二级菜单 => ul
        const menuTwo = this.lastElementChild;
        // 获取二级菜单的每一项 => ul>li
        const menu = menuTwo.children;
        // 获取二级菜单的高度 通过高度判断是否是展开状态
        const menuTwoHeight = menuTwo.offsetHeight;

        // 是否是首次展开菜单
        if (isNaN(menuIndex)) {
            // 展开菜单
            menuTwo.style.height = menu.length * 41 + 'px'; // 假设子菜单每个高度为40(有个border-bottom 1px)所以是41
            // menuIndex重新赋值当前下标
            menuIndex = this.index;
            // 结束 后续代码不执行
            return false;
        }
        if (menuIndex !== this.index) {
            // 获取上一次展开的菜单也就是那个 “ul” 标签
            const lastMenu = menuOne[menuIndex].lastElementChild
            // 将上一次展开的关闭
            lastMenu.style.height = 0;
            // 展开当前的菜单
            menuTwo.style.height = menu.length * 41 + 'px'; // 假设子菜单每个高度为40(有个border-bottom 1px)所以是41
        }
        else {
            if (!menuTwoHeight) {
                // 展开
                menuTwo.style.height = menu.length * 41 + 'px'; // 假设子菜单每个高度为40(有个border-bottom 1px)所以是41
            } else {
                // 收起
                menuTwo.style.height = 0;
            }
        }
        // menuIndex重新赋值当前下标
        menuIndex = this.index;
    });
});

🎈解析

        这段JavaScript代码是一个用于处理网页上菜单展开和收起功能的脚本：

1. 获取一级菜单元素:

   • let menuOne = document.querySelectorAll('.menuOne > li');: 使用querySelectorAll获取所有一级菜单元素（.menuOne类下的li元素）。

2. 类数组转换:

   • menuOne = [...menuOne];: 将querySelectorAll返回的类数组对象转换为真正的数组，以便于使用数组的forEach方法。

3. 定义菜单索引变量:

   • let menuIndex = NaN;: 定义一个变量menuIndex用于存储当前展开的二级菜单的索引，初始值为NaN表示没有菜单展开。

4. 遍历一级菜单:

   • menuOne.forEach((item, index) => { ... }): 使用forEach方法遍历每个一级菜单项。

5. 绑定索引和事件监听器:

   • item.index = index;: 将当前遍历到的索引绑定到菜单项上。
   • item.addEventListener('click', function () { ... }): 为每个菜单项添加点击事件。

6. 点击事件处理:

   • 在点击事件中，首先获取二级菜单元素和相关的子菜单元素。
   • const menuTwo = this.lastElementChild;: 获取当前点击的一级菜单项下的二级菜单（ul元素）。
   • const menu = menuTwo.children;: 获取二级菜单的所有子项。

7. 判断是否首次展开:

   • 如果menuIndex是NaN，表示没有菜单是展开状态，将点击的二级菜单展开，并记录索引。

8. 切换菜单显示:

   • 如果点击的不是当前索引的菜单项，将上一个展开的菜单收起，并展开当前点击的菜单。
   • 如果点击的是当前索引的菜单项，根据二级菜单的高度判断是展开还是收起。

9. 调整菜单高度:

   • menuTwo.style.height = menu.length * 41 + 'px';: 根据二级菜单项的数量和每个项的高度（假设每个项40px，加上边框1px，共41px）设置高度，实现展开效果。
   • menuTwo.style.height = 0;: 将高度设置为0，实现收起效果。

10. 更新索引:

    • menuIndex = this.index;: 更新menuIndex为当前点击的菜单项的索引。

        这段代码实现了一个简单的手风琴式菜单效果，每次只能展开一个二级菜单，点击其他一级菜单项可以切换当前展开的菜单。代码中使用了NaN来标识初始状态，以及通过比较索引来决定是展开还是收起菜单。

🎈演示