仿购物车添加商品实例 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>仿购物车添加商品实例</title>
</head>
<body>
<ul id="list">
    <li>
        <input type="button" value="-">
        <strong>0</strong>
        <input type="button" value="+">
        单价:<em>12.5元</em>
        小计:<span>0元</span>
    </li>
    <br/>
    <!-------------------------------------------------------------->
    <li>
        <input type="button" value="-">
        <strong>0</strong>
        <input type="button" value="+">
        单价:<em>10.5元</em>
        小计:<span>0元</span>
    </li>
    <br/>
    <!-------------------------------------------------------------->
    <li>
        <input type="button" value="-">
        <strong>0</strong>
        <input type="button" value="+">
        单价:<em>8.5元</em>
        小计:<span>0元</span>
    </li>
</ul>
<script type="text/javascript">

//代码重构的原则：1、尽量保证html代码结构一致，可以通过父级选区子元素
//2、把核心主程序实现，用函数包起来
//3、把每组里不同的值找出来，通过函数传参的方式实现。
window.onload  = function(){
    var oUl = document.getElementById("list");  //找到ul元素
    var aLi = oUl.getElementsByTagName("li");   //找到ul元素下的所有li元素
    //每个li就是一个主程序函数
    function fn(oLi){ //给fn()传递的是一个li对象
        var aBtn = oLi.getElementsByTagName('input');
        var oStrong = oLi.getElementsByTagName('strong')[0];
        var oEm = oLi.getElementsByTagName('em')[0];
        var oSpan = oLi.getElementsByTagName('span')[0];
        //需要获取份数与单价
        //注意：从标签里面获取到的属性值和innerHTML都是字符串的形式
        var n1 = Number(oStrong.innerHTML); //把'0'转换成0
        var n2 = parseFloat(oEm.innerHTML); //把'12.5元'转换成 12.5
        //点击加号按钮让份数增加
        aBtn[1].onclick = function(){
            n1++;
            oStrong.innerHTML = n1;
            oSpan.innerHTML = n1*n2+'元';
        }
        aBtn[0].onclick = function(){
            n1--;
            if(n1>=0){
                oStrong.innerHTML = n1;
                oSpan.innerHTML = n1*n2+'元';
            }
        }
    }
    fn(aLi[0]);    //
    fn(aLi[1]);
    fn(aLi[2]);
}


</script>
</body>
</html>

　　

posted on 2016-04-10 21:55  冬刻忆  阅读(94)  评论(0)    收藏  举报