JavaScript

来源：互联网发布：marry u软件下载编辑：程序博客网时间：2024/05/18 00:03
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style media="screen">        li {            list-style: none;        }    </style></head><body>    <ul id="list">        <li>            <input type="button" name="" value="-">            <span>0</span>            <input type="button" name="" value="+">            单价: <em>12 </em>元            小计: <strong>0</strong>元        </li>        <li>            <input type="button" name="" value="-">            <span>0</span>            <input type="button" name="" value="+">            单价: <em>112 </em>元            小计: <strong>0</strong>元        </li>        <li>            <input type="button" name="" value="-">            <span>0</span>            <input type="button" name="" value="+">            单价: <em>2 </em>元            小计: <strong>0</strong>元        </li>    </ul>    <p>        商品一共<span id="num">0</span>件<br>        商品一共<span id="price">0</span>元<br>        最贵的商品<span id="max">0</span>元    </p>    <script type="text/javascript">        //获取整体元素        var oList = document.getElementById('list');        var aLi = oList.getElementsByTagName('li');        var aSpan = oList.getElementsByTagName('span');        var aEm = oList.getElementsByTagName('em');        var aStrong = oList.getElementsByTagName('strong');        function count() { //函数名：统计            //获取统计元素            var aNum = document.getElementById('num')            var aPrice = document.getElementById('price');            var aMax = document.getElementById('max');            var num = 0;            var price = 0;            var max = 0            for (var i = 0; i < aSpan.length; i++) {                num += parseFloat(aSpan[i].innerHTML);                price += parseFloat(aStrong[i].innerHTML);                // 当aSpan值不为0时，才能进行比较                if (aSpan[i].innerHTML != 0 ) {              //满足条件一                    if (parseFloat(aEm[i].innerHTML) > max) {//满足条件二                        max = parseFloat(aEm[i].innerHTML);  //才可以                    }                }            }            aNum.innerHTML = num;        //商品个数            aPrice.innerHTML = price;    //商品总价            aMax.innerHTML = max;        //商品最贵单价        }        function shoppingList(i) {     //函数名：购物单            //获取每一个li里面的元素            var aBtns = aLi[i].getElementsByTagName('input')            var oSpan = aLi[i].getElementsByTagName('span')[0];            var oEm = aLi[i].getElementsByTagName('em')[0];            var oStrong = aLi[i].getElementsByTagName('strong')[0];            var n = 0;            //左右按钮点击事件            aBtns[0].onclick = function () {                n --;                if (n < 0) {      //不能为负数                    n = 0;                }                oSpan.innerHTML = n;             //个数                oStrong.innerHTML = n * oEm.innerHTML;    //小计 = 个数*单价                count();            }            aBtns[1].onclick = function () {                n ++;                oSpan.innerHTML = n;                oStrong.innerHTML = n * oEm.innerHTML;                count();            }        };        for (var i = 0; i < aLi.length; i++) {            shoppingList(i)    //传递参数  0，1，2        };    </script></body></html>
阅读全文
0 0