HTML5期末大作业:食品网站设计——美食网(7页) HTML+CSS+JavaScript 含源码
文章目录
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>
