4,js 简易购物车效果

<!--页面结构代码块-->
<p>
        商品名:惠普光影精灵9代<br>
        价格: <span>6299.00</span><br>
        数量: <input type="number" value="0" style="width: 50px;"> <br>
        小计: <span>0元</span>
    </p>
    <p>
        商品名:惠普光影精灵9代<br>
        价格: <span>6299.00</span><br>
        数量: <input type="number" value="0" style="width: 50px;"> <br>
        小计: <span>0元</span>
    </p>
    <p>
        商品名:惠普光影精灵9代<br>
        价格: <span>6299.00</span><br>
        数量: <input type="number" value="0" style="width: 50px;"> <br>
        小计: <span>0元</span>
    </p>
    <p>
        商品名:惠普光影精灵9代<br>
        价格: <span>6299.00</span><br>
        数量: <input type="number" value="0" style="width: 50px;"> <br>
        小计: <span>0元</span>
    </p>

<!--js代码块-->
<script>
        // 封装函数 实现代码复用 重复使用
        // 让每一个p标签都可以实现效果
        //获取元素
        var pp = document.getElementsByTagName("p");
        // 封装一个函数 在函数中动态计算小计
        function count(p) {
            var sp = p.getElementsByTagName("span");
            var inp = p.getElementsByTagName("input")[0];
            // 每次点击input的时候,就获取input的内容(商品数量);
            inp.onclick = function () {
                var n = this.value * 1;//让它文本框的值不小于0;
                if (n <= 0) {
                    n = 0;
                    this.value = 0;
                }
                // 同时获取到商品的价格
                var price = parseFloat(sp[0].innerText);
                // 动态计算小计  将计算结果设置为 sapn  的内容
                var total = n * price;
                sp[1].innerText = total + "";
            }
            // 分析不确定值p标签  
            //提取位形参
            //将形参带入到代码中 
        }
        // 调用函数
        for (var i = 0; i < pp.length; i++) {
            count(pp[i]);
        }
</script>