美文网首页
2018-07-15关于原生js的商品加减页面小demo

2018-07-15关于原生js的商品加减页面小demo

作者: yuanjiex | 来源:发表于2018-07-15 10:18 被阅读0次

    其中li为每个商品数目,li里的strong是商品数目,li里的em是商品单价,li里的input一个是减少数量,一个是增加数量,li里的span是该商品的总价,p为商品总合计,span是p的子元素,span0是商品总数,span1是总共价钱,span2为所选商品里最贵的一个,

    var aLi = document.getElementsByTagName("li");

    var aStrong = document.getElementsByTagName("strong");

    var aEm = document.getElementsByTagName("em");

    var oP = document.getElementsByTagName("p")[0];

    var aSpan = oP.getElementsByTagName("span");

    var number = 0;

    var price = 0;

    for(var i=0;i

    Price(aLi[i]);

    }

    function Price(obj){

    var aIn = obj.getElementsByTagName("input");

    var oStrong = obj.getElementsByTagName("strong")[0];

    var oEm = obj.getElementsByTagName("em")[0];

    var oSpan = obj.getElementsByTagName("span")[0];

    aIn[0].onclick = function(){

    if(oStrong.innerHTML>0){

    number--;

    oStrong.innerHTML--;

    price -= parseFloat(oEm.innerHTML);

    oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStrong.innerHTML + "元";

    aSpan[0].innerHTML = number;

    aSpan[1].innerHTML = price;

    aSpan[2].innerHTML = getMax();

    }

    }

    aIn[1].onclick = function(){

    number++;

    oStrong.innerHTML++;

    price += parseFloat(oEm.innerHTML);

    oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStrong.innerHTML + "元";

    aSpan[0].innerHTML = number;

    aSpan[1].innerHTML = price;

    aSpan[2].innerHTML = getMax();

    }

    }

    function getMax(){

    var arr = [];

    for(var i=0;i

    if(aStrong[i].innerHTML!=0){

    arr.push(parseFloat(aEm[i].innerHTML));

    }

    }

    return aStrong == 0 ? 0 : arr.sort(function(a,b){return b-a})[0];

    }

    相关文章

      网友评论

          本文标题:2018-07-15关于原生js的商品加减页面小demo

          本文链接:https://www.haomeiwen.com/subject/ketppftx.html