每日小结（5）第一周总结
今天学了一些关于html，css，JavaScript，jsp有关的视频，对一些标签和方法的使用有了个了解，还有js语句，
{% load static %}
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>餐厅订餐系统</title>
<style>
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left {
float: left;
}
/*页面容器*/
.container {
width: 1226px;
margin: 0 auto;
}
/*一级菜单css样式设计*/
.header {
background-color: #3B666B;
}
.header-menu {
float: left;
color: white;
}
.header-account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: orange;
}
/*二级菜单css样式设计*/
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 30px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6770;
}
.sub-header .search {
width: 250px;
float: right;
line-height: 100px;
}
.slider {
height: 400px;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.slider .order {
width: 493px;
height: 400px;
border: 1px solid cornflowerblue;
float: left;
text-align: center;
display: inline-block
}
.slider .dingdan {
width: 493px;
height: 400px;
border: 1px solid cornflowerblue;
float: left;
text-align: center;
display: inline-block
}
.slider .order .table {
text-align: center;
}
.munes {
width: 234px;
height: 400px;
border: 1px solid cornflowerblue;
float: left;
}
.munes .header {
background-color: #11557C;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.munes .content a {
display: block;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
}
.news {
margin-top: 14px;
}
.news .channel {
width: 228px;
height: 164px;
background-color: #5f5750;
padding: 3px;
}
.news .channel .item {
width: 76px;
height: 82px;
float: left;
text-align: center;
}
.news .channel .item img {
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .channel .item a {
display: inline-block;
font-size: 12px;
padding-top: 18px;
color: #fff;
text-decoration: none;
opacity: 0.7;
}
.news .channel .item a:hover {
opacity: 1;
}
.news .list-item {
width: 316px;
height: 170px;
}
.back {
position: fixed;
width: 66px;
height: 66px;
border: 1px solid saddlebrown;
right: 10px;
bottom: 50px;
line-height: 60px;
background-color: #8a6d3b;
}
.app {
position: relative
}
.app .download {
position: absolute;
height: 100px;
width: 100px;
display: none;
}
.app:hover .download {
display: block;
}
.butt{
color: green;
}
.dbutt{
color: cornflowerblue;
}
.abutt{
color: red;
}
</style>
<link rel="stylesheet" href="/plugins/css/bootstrap.min.css">
</head>
<body>
<!--一级菜单-->
<div class="header">
<div class="container">
<div class="header-menu">
<a href="https://699pic.com/tupian/caipin.html">小井黑食堂</a>
<a href="https://699pic.com/tupian/caipin.html">有品</a>
<a href="https://699pic.com/tupian/caipin.html">菜单栏</a>
<a href="https://699pic.com/tupian/caipin.html">死亡名单</a>
<a href="https://699pic.com/tupian/caipin.html" class="app">下载APP
<div class="download">
<img src="/static/img/s1.jpg">
</div>
</a>
</div>
<div class="header-account">
<a href="https://699pic.com/tupian/caipin.html">登录</a>
<a href="https://699pic.com/tupian/caipin.html">注册</a>
<a href="https://699pic.com/tupian/caipin.html">消息通知</a>
<a href="http://127.0.0.1:8000/depart/list/">后台餐品管理</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<!--二级菜单-->
<div class="sub-header">
<div class="container">
<div class=" ht logo">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/logo.jpg">
</a>
</div>
<div class=" ht menu-list">
<a href="https://699pic.com/tupian/caipin.html">小井餐馆</a>
<a href="https://699pic.com/tupian/caipin.html">推荐</a>
<a href="https://699pic.com/tupian/caipin.html">新品</a>
<a href="https://699pic.com/tupian/caipin.html">热销</a>
<a href="https://699pic.com/tupian/caipin.html">快餐</a>
</div>
<div class=" ht search">
<input type="text" value="" style="font-size: 16px" placeholder="搜索">
<input type="submit" value="搜索">
</div>
<div class="clear:both"></div>
</div>
</div>
<!--三级区域-->
<div class="slider">
<div class="container">
<div class="munes ">
<div class="item">
<div class="header" onclick="clickMe(this)">面食</div>
<div class="content ">
<a>西红柿鸡蛋面</a>
<a>红烧牛肉面</a>
<a>安徽板面</a>
<a>鸡丁牛肉面</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this)">饭食</div>
<div class="content ">
<a>鱼香肉丝盖饭</a>
<a>宫保鸡丁盖饭</a>
<a>爆炒鸡米饭</a>
</div>
</div>
</div>
<div class="order ">
<!-- Default panel contents -->
<div class="panel-heading">菜单列表</div>
<!-- Table -->
<div class="table">
<table style="text-align: center">
<thead>
<tr>
<th>ID</th>
<th>菜名</th>
<th>价格（元）</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in queryset %}
<tr data_price="{{ obj.price }}">
<td>{{ obj.id }}</td>
<td>{{ obj.menu }}</td>
<td>{{ obj.price }}</td>
<td>
<button style="color: red" class="add-button" data-menu="{{ obj.menu }}" data-price="{{ obj.price }}">
+1
</button>
<button style="color: red" class="subtract-button" data-menu="{{ obj.menu }}" data-price="{{ obj.price }}">
-1
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="dingdan">
<div class="panel-heading">已选菜品</div>
<div id="selected-dishes"></div>
<p>总价格: <span id="total-price">0</span></p>
<button class="butt" id="confirm-order-button"onclick="return confirm('您确定要提交订单吗？')">确认订单</button>
<button class="dbutt" id="view-order-button">查看订单</button>
</div>
<div style="clear: both"></div>
</div>
</div>
<!--四级区域-->
<div class="news">
<div class="container">
<div class="channel left">
<div class="item ">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item ">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item ">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item ">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item ">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="item ">
<a href="https://699pic.com/tupian/caipin.html">
<img src="/static/img/d1.png">
<span>保障服务</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left: 14.35px">
<img src="/static/img/a1.jpg">
</div>
<div class="list-item left" style="margin-left: 14.35px">
<img src="/static/img/a2.jpg">
</div>
<div class="list-item left" style="margin-left: 14.35px">
<img src="/static/img/a3.jpg">
</div>
<div class="clear:both"></div>
</div>
</div>
<div class="back">
<span>返回顶部</span>
</div>
<script src="/plugins/js/jquery-2.1.4.min.js"></script>
<script src="/plugins/js/bootstrap.min.js"></script>
<script>
function clickMe(self) {
var hasHide = $(self).next().hasClass("hide");
if (hasHide) {
$(self).next().removeClass("hide");
} else {
$(self).next().addClass("hide");
}
}
document.addEventListener("DOMContentLoaded", function () {
var addButtonList = document.querySelectorAll(".add-button");
var subtractButtonList = document.querySelectorAll(".subtract-button");
var totalPriceElement = document.getElementById("total-price");
var selectedDishesElement = document.getElementById("selected-dishes");
var confirmOrderButton = document.getElementById("confirm-order-button");
var viewOrderButton = document.getElementById("view-order-button");
var totalPrice = 0;
var selectedDishes = [];
// 加一操作
addButtonList.forEach(function (button) {
button.addEventListener("click", function () {
var name = button.getAttribute("data-menu");
var price = parseFloat(button.getAttribute("data-price"));
totalPrice += price;
totalPriceElement.textContent = totalPrice.toFixed(2);
var dishElement = document.createElement("p");
dishElement.textContent = name;
selectedDishesElement.appendChild(dishElement);
});
});
// 减一操作
subtractButtonList.forEach(function (button) {
button.addEventListener("click", function () {
var name = button.getAttribute("data-menu");
var price = parseFloat(button.getAttribute("data-price"));
totalPrice -= price;
totalPriceElement.textContent = totalPrice.toFixed(2);
var dishElements = selectedDishesElement.getElementsByTagName("p");
for (var i = 0; i < dishElements.length; i++) {
if (dishElements[i].textContent === name) {
dishElements[i].remove();
break;
}
}
});
});
document.getElementById("confirm-order-button").addEventListener("click", function() {
// 确认订单操作代码
selectedDishes = [];
var selectedDishesText = "";
var dishElements = selectedDishesElement.getElementsByTagName("p");
for (var i = 0; i < dishElements.length; i++) {
var dishName = dishElements[i].textContent;
selectedDishes.push(dishName);
selectedDishesText += dishName + ", ";
}
selectedDishesText = selectedDishesText.trim();
if (selectedDishesText.endsWith(",")) {
selectedDishesText = selectedDishesText.slice(0, -1);
}
localStorage.setItem("selectedDishes", selectedDishesText);
});
viewOrderButton.addEventListener("click", function() {
// 查看订单操作代码
var selectedDishesText = localStorage.getItem("selectedDishes");
if (selectedDishesText) {
window.location.href = "/order-details?dishes=" + encodeURIComponent(selectedDishesText);
} else {
alert("您未下单");
}
});
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！