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

最新推荐文章于 2024-12-27 10:05:48 发布

Y小夜

最新推荐文章于 2024-12-27 10:05:48 发布

阅读量738

点赞数 34

分类专栏： Javaweb开发文章标签： javascript 前端开发语言 web java

本文链接：https://blog.youkuaiyun.com/shsjssnn/article/details/140262024

版权

Javaweb开发专栏收录该内容

10 篇文章

订阅专栏

🎼个人主页：【Y小夜】

😎作者简介：一位双非学校的大二学生，编程爱好者，

专注于基础和实战分享，欢迎私信咨询！

🎆入门专栏：🎇【MySQL，Java基础，Rust】

🎈热门专栏：🎊【Python，Javaweb，Vue框架】

感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️

🎯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 的函数，它用于验证用户在注册表单中输入的密码是否一致：

函数定义:
- function validateForm() { ... }: 定义了一个名为 validateForm 的函数，没有接受任何参数。
获取表单数据:
- var password1 = document.forms["registerForm"]["password1"].value;: 获取名为 registerForm 的表单中名为 password1 的输入字段的值。
- var password2 = document.forms["registerForm"]["password2"].value;: 获取同样表单中名为 password2 的输入字段的值。
密码比较:
- if (password1 !== password2) { ... }: 使用 !== 操作符检查两次输入的密码是否不相同。
错误提示:
- alert("两次密码不同，请重新输入");: 如果两次密码不同，则弹出一个警告框提示用户。
阻止表单提交:
- return false;: 如果密码不一致，函数返回 false，这将阻止表单提交。
允许表单提交:
- 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代码是一个用于处理网页上菜单展开和收起功能的脚本：

获取一级菜单元素:
- let menuOne = document.querySelectorAll('.menuOne > li');: 使用querySelectorAll获取所有一级菜单元素（.menuOne类下的li元素）。
类数组转换:
- menuOne = [...menuOne];: 将querySelectorAll返回的类数组对象转换为真正的数组，以便于使用数组的forEach方法。
定义菜单索引变量:
- let menuIndex = NaN;: 定义一个变量menuIndex用于存储当前展开的二级菜单的索引，初始值为NaN表示没有菜单展开。
遍历一级菜单:
- menuOne.forEach((item, index) => { ... }): 使用forEach方法遍历每个一级菜单项。
绑定索引和事件监听器:
- item.index = index;: 将当前遍历到的索引绑定到菜单项上。
- item.addEventListener('click', function () { ... }): 为每个菜单项添加点击事件。
点击事件处理:
- 在点击事件中，首先获取二级菜单元素和相关的子菜单元素。
- const menuTwo = this.lastElementChild;: 获取当前点击的一级菜单项下的二级菜单（ul元素）。
- const menu = menuTwo.children;: 获取二级菜单的所有子项。
判断是否首次展开:
- 如果menuIndex是NaN，表示没有菜单是展开状态，将点击的二级菜单展开，并记录索引。
切换菜单显示:
- 如果点击的不是当前索引的菜单项，将上一个展开的菜单收起，并展开当前点击的菜单。
- 如果点击的是当前索引的菜单项，根据二级菜单的高度判断是展开还是收起。
调整菜单高度:
- menuTwo.style.height = menu.length * 41 + 'px';: 根据二级菜单项的数量和每个项的高度（假设每个项40px，加上边框1px，共41px）设置高度，实现展开效果。
- menuTwo.style.height = 0;: 将高度设置为0，实现收起效果。
更新索引:
- menuIndex = this.index;: 更新menuIndex为当前点击的菜单项的索引。