阅读背景:

js实现简易购物车功能_元荣的博客_js简易购物车

来源:互联网 

一.整体效果图

(关灯下)

 (开灯下)

二.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link type="text/css" rel="stylesheet" href="/go.html?url=购物车样式.css">
    <script src="购物车功能.js"></script>
</head>
<body id="body" >
<button id="kg" onclick="kz()">开灯</button>
<div id="cons">
    <table id="table">
        <tr>
            <th>产品名称</th>
            <th>产品单价</th>
            <th>产品数量</th>
            <th>总价</th>
        </tr>
        <tr>
            <td>小米11</td>
            <td >5000</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">5</span>
                <input type="button" value="+" onclick="add2(this)"><!--通过this找到点击的是谁-->
            </td>
            <td class="money">25000</td>
        </tr>
        <tr>
            <td>联想Y9000</td>
            <td>10000</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">1</span>
                <input type="button" value="+" onclick="add2(this)">
            </td>
            <td class="money">10000</td>
        </tr>
        <tr>
            <td>男士护肤</td>
            <td>200</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">1</span>
                <input type="button" value="+" onclick="add2(this)">
            </td>
            <td class="money">200</td>
        </tr>
        <tr>
            <td colspan="3">总金额</td>
            <td id="total">5000</td>
        </tr>
    </table>
</div>
</body>
</html><!D



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: