商品价格计算

最新推荐文章于 2024-11-07 10:38:40 发布

*初级小白*~

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量225

点赞数

分类专栏： JavaScript案例文章标签： html html5 css

本文链接：https://blog.csdn.net/ScumStudy/article/details/120263245

版权

JavaScript案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、HTML代码

<table border="1">
        <tr>
            <th>图片</th>
            <th>单价</th>
            <th>数量</th>
            <th>价格</th>
        </tr>
        <tr>
            <td class="img">
                <!-- <img src="./img/timg.jpg" alt="" > -->
            </td>
            <td class="danjia">20</td>
            <td class="num">
                <span id="sub">-</span>
                <span id="number">0</span>
                <span id="add">+</span>
            </td>
            <td class="price" id="price">10</td>
        </tr>
    </table>

2、css样式

    table{
            width: 600px;
            /* 合并边框 */
            border-collapse: collapse;
            margin: 50px auto;
        }
        th{
            height: 50px;
        }
        td{
            height: 100px;
            text-align: center;
            user-select: none;
        }
        .img{
            background: url('./img/timg.jpg') no-repeat center center/contain;
        }
        #sub{
            display: inline-block;
            height: 30px;
            width: 30px;
            background-color: rgb(153, 153, 153);
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
         #number{
            display: inline-block;
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
        } 
        #add{
            display: inline-block;
            height: 30px;
            width: 30px;
            background-color: rgb(153, 153, 153);
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

3、js代码
(1)、先获取dom元素

 //获取dom元素
         var oSub=document.getElementById('sub');
        var oNum=document.getElementById('number');
        var oAdd=document.getElementById('add');
        var oPrice=document.getElementById('price');

(2)、设置变量存储

var num=0,price=10;

(3)、点击事件

     oAdd.onclick=function(){
            num++;
            oNum.innerHTML=num;
            oPrice.innerHTML=num*price;
        }
        oSub.onclick=function(){
            num--;
            //当 num<0的时候，给num赋值0，然后return出来，防止页面渲染继续减
            if(num<0){
                num=0;
                return
            }
            oNum.innerHTML=num;
            oPrice.innerHTML=num*price;
        }

js可以优化使用函数封装

  <!-- 优化代码，封装 -->
    <script>
         //获取dom元素
         var oSub=document.getElementById('sub');
        var oNum=document.getElementById('number');
        var oAdd=document.getElementById('add');
        var oPrice=document.getElementById('price');

        var num=0,price=10;
        oAdd.onclick=function(){
            calculation(false);
        }
        oSub.onclick=function(){
            calculation(true);
        }

        function calculation(bool){
            bool? num--:num++;
            if(num<0){
                num=0;
                return
            }
            oNum.innerHTML=num;
            oPrice.innerHTML=num*price;
        }
    </script>

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 600px;
            /* height: 100px; */
            border-collapse: collapse;
            margin: 50px auto;
        }
        th{
            height: 50px;
        }
        td{
            height: 100px;
            text-align: center;
            user-select: none;
        }
        /* .img img{
            width: 100px;
            height: 100px;
            position: relative;
            left: 90px;
        } */
        .img{
            background: url('./img/timg.jpg') no-repeat center center/contain;
        }
        #sub{
            display: inline-block;
            height: 30px;
            width: 30px;
            background-color: rgb(153, 153, 153);
            text-align: center;
            line-height: 30px;
        }
         #number{
            display: inline-block;
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
        } 
        #add{
            display: inline-block;
            height: 30px;
            width: 30px;
            background-color: rgb(153, 153, 153);
            text-align: center;
            line-height: 30px;
        } 
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>图片</th>
            <th>单价</th>
            <th>数量</th>
            <th>价格</th>
        </tr>
        <tr>
            <td class="img">
                <!-- <img src="./img/timg.jpg" alt="" > -->
            </td>
            <td class="danjia">20</td>
            <td class="num">
                <span id="sub">-</span>
                <span id="number">0</span>
                <span id="add">+</span>
            </td>
            <td class="price" id="price">10</td>
        </tr>
    </table>

    <!-- <script>
        //获取dom元素
        var oSub=document.getElementById('sub');
        var oNum=document.getElementById('number');
        var oAdd=document.getElementById('add');
        var oPrice=document.getElementById('price');

        var price=10;
        //点击事件
        oSub.οnclick=function(){
            // console.log(111);
            // console.log(oNum.innerHTML);
            var num=oNum.innerHTML;
            num--;
            if(num<0){
                num=0;
                return
            }
            oNum.innerHTML=num;
            oPrice.innerHTML=num*price;
        }
        oAdd.οnclick=function(){
            // console.log(222);
            var num=oNum.innerHTML;
            num++;
            oNum.innerHTML=num;
            oPrice.innerHTML=num*price;
        }
    </script> -->

    <!-- 优化代码，封装 -->
    <script>
         //获取dom元素
         var oSub=document.getElementById('sub');
        var oNum=document.getElementById('number');
        var oAdd=document.getElementById('add');
        var oPrice=document.getElementById('price');

        var num=0,price=10;
        oAdd.onclick=function(){
            calculation(false);
        }
        oSub.onclick=function(){
            calculation(true);
        }

        function calculation(bool){
            bool? num--:num++;
            if(num<0){
                num=0;
                return
            }
            oNum.innerHTML=num;
            oPrice.innerHTML=num*price;
        }
    </script>
</body>
</html>