Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）

最新推荐文章于 2025-04-01 14:37:09 发布

飞行的小猪

最新推荐文章于 2025-04-01 14:37:09 发布

阅读量3.6w

点赞数 80

分类专栏： Web前端文章标签： css3 html5 jquery javascript 数据库

本文链接：https://blog.csdn.net/yy2017220302028/article/details/104048783

版权

本文介绍了一个基于HTML5、CSS3和jQuery的Web点餐系统，采用WebSQL数据库，无需后端。系统包括首页、已选菜品、我的订单和订单统计四大功能。首页展示菜品，用户可点菜并提交，数据保存在本地。我的订单页面可显示和删除订单，订单统计使用图表展示菜品销售统计。整个系统实现了前端数据管理和图表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、系统简介

该Web点餐系统是为了给食堂提供下一天的菜品做参考，使用HTML5 + CSS3 + JS(jQuery)进行前端开发，数据库采用本地数据库WebSQL，不使用后端开发。系统实现以下基本功能：

首页导航有三个：首页、我的订单、订单统计
在首页中：
(1) 展示当天菜品、热卖菜品、推荐菜品，显示完整的信息。
(2) 实现点菜，结果显示在合适位置中，所点的菜能够取消。
(3) 点菜的“提交”是将数据保存到本地，然后在“我的订单”中重现这些数据。
在我的订单页面中，能够从保存在本地的数据中心提取出数据并能显示，并能添加和删除。
在订单统计页面中，用图表显示当天热卖前三的菜品统计结果。统计结果用不同类型的图表展示以下维度：菜品、价格、口味、食材。

二、系统设计

系统功能结构图：
在这里插入图片描述

三、系统实现

· 首页（当天菜品）/推荐菜品/热买菜品

在这里插入图片描述
页面布局的核心html文件
让按钮或标签实现跳转界面：嵌套<a href=""></a>添加超链接即可。

<div>
    <div  class="nav_bg">
        <div class="wrap"> 
            <ul id="nav" class="nav clearfix">
                <li class="nLi" style="font-size: 30px;">
                    <h3 class="e"><a  href="#" style="font-size: 23px;">饿了呀</a></h3>
                </li>
                <li class="nLi">
                  <h3 class="d"><a  href="./index.html">首页</a></h3>
                </li>
                <li class="nLi ">
                  <h3 class="d"><a href="myorder.html">我的订单</a></h3>
                </li>       
                <li class="nLi ">
                  <h3 class="d"><a href="order-statistic.html">订单统计</a></h3>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="left" >
          <ul class="leftborder">
              <li class="border1">
                <a href="myorder.html">
                    <img src='../images/dingdan.png' width=14 height=14 />
                    <span class="outer">  我的订单</span>
                    <br>
                    <br>
                    <span class="inner">近三个月的订单</span>      
                </a>
            </li>
            <li class="border2">
                <a href="./today.html">
                    <img src='../images/remaicaipin.png' width=14 height=14 />
                    <span class="outer">当天菜品</span>
                </a>
            </li>
            <li class=