【JavaWeb项目】——外卖订餐系统之js部分、项目总结

举报
Y小夜 发表于 2024/12/05 22:19:53 2024/12/05
【摘要】 【JavaWeb项目】——外卖订餐系统之js部分、项目总结

🎯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. 判断是否首次展开:

    • 如果menuIndexNaN,表示没有菜单是展开状态,将点击的二级菜单展开,并记录索引。
  8. 切换菜单显示:

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

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

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

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

🎈演示

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。