商品价格计算

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了商品价格计算前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

商品价格计算样式

<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <title>moban</title>

    <style>
        body,h1,h2,h3,h4,h5,h6,ul,ol,p,div {
            margin: 0;
            font-weight: normal
        }

        ul,ol {
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        #goods {
            width: 600px;
            margin: 100px auto;
            border-collapse: collapse;
            user-select: none;
        }

        #goods th {
            height: 30px;
        }

        #goods td {
            text-align: center;
            height: 100px;
        }

        #goods td span#sub,#goods td span#add {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #666;
            color: #fff;
            cursor: pointer;
        }

        #goods td span#number {
            display: inline-align: center;
        }

        #goods .img {
            background: url("https://img12.360buyimg.com/n1/jfs/t1/107783/33/1287/108069/5dfc6e3bE91c5183d/8b7eea72f8f5db2d.jpg") no-repeat center center/contain;
        }
    </style>

</head>

<body>

    <table id="goods" border="1">
        <tr>
          <th>图片</th>
          <th>单价</th>
          <th>数量</th>
          <th>价格</th>
        </tr>
        <tr>
          <td class="img"></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">0</td>
        </tr>
      </table>



    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>
        //获取标签节点权限
        let odanjia = document.getElementById("danjia"),onumber = document.getElementById("number",price = 20
        点击加号事件
        oadd.onclick = function (){
            条件变化量
            num ++;
            赋值变化量为数值
            onumber.innerHTML = num;
            赋值商品价格
            oprice.innerHTML = num * price;

        }
        点击减号事件
        osub.onclick = (){
            条件变化量,与,任意一边有假都为假
            num && num -- price;
        }
    </script>
</body>
<!--
笔记区域




-->

</html>

商品价格计算

总结


以上是前端之家为你收集整理的商品价格计算全部内容,希望文章能够帮你解决商品价格计算所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。