100字范文 > HTML5期末大作业:食品网站设计——美食网(7页) HTML+CSS+JavaScript实现一个静态页面（含源码）

HTML5期末大作业:食品网站设计——美食网(7页) HTML+CSS+JavaScript实现一个静态页面（含源码）

时间：2022-06-06 17:16:34

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业:食品网站设计——美食网(7页) HTML+CSS+JavaScript实现一个静态页面（含源码）获取更多源码作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的购物车</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="bootstrap/js/bootstrap.min.js"><script src="js/jquery-3.0.0.js"></script><script src="/vue/2.6.11/vue.js"></script><style>a {text-decoration: none;}td,td botton {text-align: center;color: blue;}</style><script>$(function () {var vm = new Vue({el: "#tab",data: {goods: [{name: "蛋糕1",price: 20,num: 1,image: "image/tian1.jpg"},{name: "蛋糕2",price: 10,num: 1,image: "image/tian2.jpg"},{name: "蛋糕3",price: 30,num: 1,image: "image/tian3.jpg"}]}})//1.全选全不选$(".selectAll").click(function () {$("[type='checkbox']").prop("checked", $(this).prop("checked"))})})//增加数量 function addNum(a) {var num = $(a).prev().val()console.log(num)$(a).prev().val(++num)}//减少数量function subNum(a) {var num = $(a).next().val()console.log(parseInt(num))if (parseInt(num) > 0)$(a).next().val(--num)}//删除单行function del(a) {var tr = a.parentNode.parentNodetr.parentNode.removeChild(tr)}//购买单行function pay(a) {if(confirm("确认支付吗")){del(a)if(confirm("使用优惠券吗"))alert("购买成功（使用了优惠券）")elsealert("购买成功（未使用优惠券）")}else{alert("购买失败")}}//删除所有行function delALL() {var selects = document.getElementsByName('select')for (var i = selects.length - 1; i >= 0; i--) {if (selects[i].checked) {var tr = selects[i].parentNode.parentNodetr.parentNode.removeChild(tr)}}}//多个购买function pays() {if(confirm("确认支付吗")){delALL()if(confirm("使用优惠券吗"))alert("购买成功（使用了优惠券）")elsealert("购买成功（未使用优惠券）")} else{alert("购买失败")}}</script></head><body><h2 style=" text-align:center;letter-spacing:15px;color:pink;">我的购物车</h2><table id="tab" class="table table-bordered table-striped table-hover"><tr><td><input type="checkbox" class="selectAll">全选 </td><td>商品信息 </td><td>单价 </td><td>数量 </td><td>操作</td></tr><tr v-for="(item,index) in goods"><td><input type="checkbox" name="select"></td><td><img :src="item.image" style="width:50px;height: 50px;"><a href="##">{{item.name}}</a></td><td>￥{{item.price}}</td><td><img src="image/subtraction.gif" class="sub" onclick="subNum(this)"><input type="text" width="30px" disabled v-model="item.num" class="amount"><img class="add" src="image/add.gif" alt="" onclick="addNum(this)"></td><td><botton class="del" onclick="del(this)">删除</botton><botton class="pay" onclick="pay(this)">支付</botton></td></tr><tr><td colspan="5"><botton style="margin-right:20px;" id="delALL" onclick="delALL()">批量删除</botton><botton id="pays" onclick="pays()">支付购买</botton></td></tr></table></body></html>