商品价格计算

关注

原创最新推荐文章于 2026-07-11 15:06:04 发布 307 阅读 AI 写同款· GEO 优化 ›

manus如何实现对商品的比价 Manus 的比价功能体现了“手脑协同”（Mens et Manus）的设计理念：👉 通过任务分解调度多工具链 →解决执行问题；👉 结合动态成本计算 →解决决策精度问题；👉 最终以自动化报告交付 →解决用户体验问题。尽管存在效率与泛化性瓶颈，其端到端闭环处理模式，已显著超越传统比价工具，成为 AI Agent 在消费场景落地的标杆案例。附：Manus 比价流程简表阶段操作技术支撑搜索多平台并行搜索商品，应对验证码云端虚拟机 + 浏览器控制工具数据整理。阅读详情

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>