masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - Apakah prinsip asas JS untuk troli beli-belah?
習慣沉默
習慣沉默 2017-05-19 10:36:16
0
3
679

1. Apakah prinsip asas troli beli-belah? Bagaimanakah statistik boleh dilengkapkan?
2. Gunakan parameter fungsi untuk mencipta separuh masa pertama.
3. Kodnya adalah seperti berikut: 

     <!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <style>
    li{margin-top:20px;}
  </style>
  <script>
    window.onload = function (){
        var box = document.getElementById("box");
        var aLi = box.getElementsByTagName("li");
        //var oU = document.getElementsByTagName("u");
        function fn(li){
            var aBtn = li.getElementsByTagName("input");
            var oSpan =li.getElementsByTagName("span")[0];
            var oI = li.getElementsByTagName("i")[0];
            var oB = li.getElementsByTagName("b")[0];

            aBtn[1].onclick = function(){
                oSpan.innerHTML++;
                oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            }
            aBtn[0].onclick = function(){
                if(oSpan.innerHTML>0){
                    oSpan.innerHTML--;
                }
                oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                }
            }
        
        for(var i=0;i<aLi.length;i++){
            fn(aLi[i]);
            //
        }
    

    }//js最后执行
  </script>
 </head>
 <body>
    <ul id="box">
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>10</i>元
            小计：<b>0</b>元
        </li>
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>7.5</i>元
            小计：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>15</i>元
            小计：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>20</i>元
            小计：<b>0</b>元
        </li> 
        <li>
            <input type="button" value="-">
            <span>0</span>
            <input type="button" value="+">
            单价：<i>150</i>元
            小计：<b>0</b>元
        </li>
        
    </ul>
 </body>
</html>

Bahagian berikut: Terdapat n keping produk secara keseluruhan, harga unit produk paling mahal ialah yuan, bagaimana untuk menulis bahagian yang berharga b yuan secara keseluruhan?
Bagaimana untuk menetapkan nilai kepada pembolehubah dan mengira jumlah akhir data?
(Kod dan gambar telah dipos)

習慣沉默
習慣沉默

membalas semua(3)
淡淡烟草味
淡淡烟草味2017-05-19 10:38:16 Tingkat 3

Saya akan siarkan semua kod. Tengoklah

   <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>网页标题</title>
      <style>
        li{margin-top:20px;}
      </style>
      <script>
        window.onload = function (){
            // var box = document.getElementById("box");
            // var aLi = box.getElementsByTagName("li");
            // //var oU = document.getElementsByTagName("u");
            // function fn(li){
            //     var aBtn = li.getElementsByTagName("input");
            //     var oSpan =li.getElementsByTagName("span")[0];
            //     var oI = li.getElementsByTagName("i")[0];
            //     var oB = li.getElementsByTagName("b")[0];
    
            //     aBtn[1].onclick = function(){
            //         oSpan.innerHTML++;
            //         oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            //     }
            //     aBtn[0].onclick = function(){
            //         if(oSpan.innerHTML>0){
            //             oSpan.innerHTML--;
            //         }
            //         oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
            //     }
            // }
            
            // for(var i=0;i<aLi.length;i++){
            //     fn(aLi[i]);
            //     counttotal()
            //     //
            // }
    
            //总和变量
            var total = 0;
            //单价最贵数组
            var mostexp = [];
            //dom 节点
            var box = document.getElementById("box");
            var aLi = box.getElementsByTagName("li");
            var idom = box.getElementsByTagName('i');
            //单价最高
            for(var i=0;i<idom.length;i++){
                mostexp.push(+idom[i].innerHTML)
            }
            document.getElementById('j-exp').innerHTML = Math.max.apply(null,mostexp)
            //绑定加减事件
            function fn(li){
                var oSpan =li.getElementsByTagName("span")[0];
                var oI = li.getElementsByTagName("i")[0];
                var oB = li.getElementsByTagName("b")[0];
                var aBtn = li.getElementsByTagName("input");
    
                for(var i=0,len=aBtn.length;i<len;i++){
                    if(i===0){
                        aBtn[i].onclick = function(){
                            if(oSpan.innerHTML>0){
                                oSpan.innerHTML--;
                            }
                            oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                            counttotal()
                        }
                    }else{
                        aBtn[i].onclick = function(){
                            oSpan.innerHTML++;
                            oB.innerHTML = oSpan.innerHTML*oI.innerHTML;
                            counttotal()
                        }
                    }
                }    
            }
    
            for(var i=0;i<aLi.length;i++){
                fn(aLi[i]);
            }

            //计算总和
            function counttotal(){
                total = 0;
                var getb = document.getElementsByTagName('b');    
                for(var i=0,len=getb.length;i<len;i++){
                    total+= +getb[i].innerHTML
                }
                document.getElementById('j-total').innerHTML = total
            }
            
        }//js最后执行
      </script>
     </head>
     <body>
        <ul id="box">
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>10</i>元
                小计：<b>0</b>元
            </li>
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>7.5</i>元
                小计：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>15</i>元
                小计：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>20</i>元
                小计：<b>0</b>元
            </li> 
            <li>
                <input type="button" value="-">
                <span>0</span>
                <input type="button" value="+">
                单价：<i>150</i>元
                小计：<b>0</b>元
            </li>
            
        </ul>
        <!-- 变化 -->
        <p>单价最高：<span id="j-exp">0</span>元</p>
        <p>总计：<span id="j-total">0</span>元</p>
        <!-- 变化 -->
     </body>
    </html>
Suka +0
Tambah Balasan
Peter_Zhu
Peter_Zhu2017-05-19 10:38:16 Tingkat 2

Adalah sesuai untuk menulis troli beli-belah menggunakan kaedah berorientasikan objek Berikut ialah kod es6

class Cart{
    constructor(){
        //set，map，array，随你选
        this.list = [];
    }
    //将商品加入购物车，需要判断购物车内是否有该商品，
    //以及商品规格是否相同
    add(goods){}
    //将商品移除购物车,这个key可以是id，名称等等，你自己决定
    remove(key){}
    //计算购物车总价，当然，最贵的当然可以计算出来了，排个序就号了
    computeMoney(){}
    //保存购物车，localstorage,服务器，你自己决定，保存之后还是之前更新界面还是你决定
    save(){}
    //清空购物车
    clear(){}
    //购物车是否为空
    isEmpty(){}
    //更多逻辑.......
}

Adalah yang terbaik untuk menambah fungsi cangkuk (onSave, onAdd, onRemove....) pada setiap kaedah untuk mencapai penggunaan semula dan penyahgandingan

Suka +0
Tambah Balasan
phpcn_u1582
phpcn_u15822017-05-19 10:38:16 Tingkat 1

Prinsipnya ialah apabila pengguna mengklik tanda tambah pada halaman pemilihan produk, data diperoleh daripada sumber data dan dimasukkan ke dalam tatasusunan baharu

var data=res.data;
var shopCar=[];
add(index){//点击加号的时候
    shopCar[index]=data[index] 
}

Kemudian dapatkan objek tatasusunan baharu, iaitu senarai troli beli-belah.
Statistik adalah untuk menambah medan harga dalam objek tatasusunan Bagi kaedah yang anda gunakan untuk menambah, ia bergantung pada pilihan anda.

Jika ada tanda tolak, mesti ada juga operasi tolak yang sepadan.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan