HTML5期末大作业

文章目录

  • HTML5期末大作业
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现

一、作品展示






二、文件目录

三、代码实现


<!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="https://cdn.bootcss/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.parentNode
            tr.parentNode.removeChild(tr)
        }
        //购买单行
        function pay(a) {
            if(confirm("确认支付吗")){
                del(a)
                if(confirm("使用优惠券吗"))
                  alert("购买成功（使用了优惠券）")
                  else
                  alert("购买成功（未使用优惠券）")
            }
            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.parentNode
                    tr.parentNode.removeChild(tr)
                }
            }
        }
        //多个购买
        function pays() {
            if(confirm("确认支付吗"))
           {
            delALL()
            if(confirm("使用优惠券吗"))
                  alert("购买成功（使用了优惠券）")
                  else
                  alert("购买成功（未使用优惠券）")
           } 
           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>

更多推荐

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