模拟购物车

  <!DOCTYPE html>
  <html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>
        <button type="button">-</button>
        <span>0</span>
        <button type="button">+</button>
        &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        单价 ：<strong>34</strong>元
        &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        小计： <i>0</i>元
    </p>
    <p>
        <button type="button">-</button>
        <span>0</span>
        <button type="button">+</button>
        &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        单价 ：<strong>28.7</strong>元
        &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        小计： <i>0</i>元
    </p>
    <p>
        <button type="button">-</button>
        <span>0</span>
        <button type="button">+</button>
        &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        单价 ：<strong>68</strong>元
        &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        小计： <i>0</i>元
    </p>
    <hr>
    <div>
        共购买了<span>0</span>件商品 单价最贵的：<span>0</span>元，合计<span>0</span>元
    </div>
    <script type="text/javascript">
        var aP = document.getElementsByTagName('p');
        var adiv = document.getElementsByTagName('div')[0];
        var oSpan1 = adiv.getElementsByTagName('span')[0];
        var oSpan2 = adiv.getElementsByTagName('span')[1];
        var oSpan3 = adiv.getElementsByTagName('span')[2];
        var max = 0;
        var arr = [];
        for (var i = 0; i < aP.length; i++) {
            tab(aP[i]);
        }

        function tab(obj) {
            var oBtn1 = obj.getElementsByTagName('button')[0];
            var oBtn2 = obj.getElementsByTagName('button')[1];
            var oSpan = obj.getElementsByTagName('span')[0];
            var oI = obj.getElementsByTagName('i')[0];
            var oStr = obj.getElementsByTagName('strong')[0];
            oBtn1.onclick = function() {
                if (oSpan.innerHTML == 0) {
                    return;
                }
                oSpan.innerHTML = Number(oSpan.innerHTML) - 1;
                oSpan1.innerHTML = Number(oSpan1.innerHTML) - 1;
                oI.innerHTML = oSpan.innerHTML * oStr.innerHTML;

                oSpan3.innerHTML = Number(oSpan3.innerHTML) - Number(oStr.innerHTML);
                findMax();
                oSpan2.innerHTML = max;
            }
            oBtn2.onclick = function() {
                oSpan.innerHTML = Number(oSpan.innerHTML) + 1;
                //共计商品
                oSpan1.innerHTML = Number(oSpan1.innerHTML) + 1;
                // 共计价格
                oI.innerHTML = oSpan.innerHTML * oStr.innerHTML;
                oSpan3.innerHTML = Number(oSpan3.innerHTML) + Number(oStr.innerHTML);
                // 最贵单价
                if (max < Number(this.nextElementSibling.innerHTML)) {
                    max = Number(this.nextElementSibling.innerHTML);
                    oSpan2.innerHTML = max;
                }
            }

            function findMax() {
                // 清空数组
                arr = [];
                // 清空最大值
                max = 0;
                // 存放数量不为0的单价
                for (var i = 0; i < aP.length; i++) {
                    var oSpan0 = aP[i].getElementsByTagName('span')[0];
                    var oStrong0 = aP[i].getElementsByTagName('strong')[0];
                    if (Number(oSpan0.innerHTML) > 0) {
                        arr.push(Number(oStrong0.innerHTML));
                    }
                }
                // 在单价中找最大值
                for (var i = 0; i < arr.length; i++) {
                    if (max < arr[i]) {
                        max = arr[i];
                    }
                }
            }
        }
    </script>
  </body>
 </html>

qq列表

<!DOCTYPE html>
   <html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul,h4{
            margin: 0;
            list-style: none;
            padding: 0;
        }       
        #list{      
            width: 240px;
        }
        h4{
            height: 30px;
            background: #999999;
            text-indent:2em ;
            color: #FFF;
            cursor: pointer;
            border: 1px #000000 solid;      
        }
        #list ul li{
            text-indent: 2em;
            border: 1px black solid;
            cursor: pointer;
            line-height: 26px;          
        }
        #list ul li:hover{
            background: #CCE9AC;
        }       
        #list ul{
            list-style: none;
            display: none;      
        }       
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <h4>我的好友</h4>
            <ul>
                <li>张三</li>
                <li>李四</li>
                <li>王五00</li>
                <li>杨柳0</li>
                <li>高柒</li>
            </ul>
        </li>           
        <li>
            <h4>我的同事</h4>
           <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五00</li>
            <li>杨柳0</li>
            <li>高柒</li>
           </ul>
        </li>       
        <li>
            <h4>我的同学</h4>
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五00</li>
            <li>杨柳0</li>
            <li>高柒</li>
        </ul>
        </li>                   
    </ul>   
    <script type="text/javascript">
        var oList=document.getElementById('list');
        var aH4=oList.getElementsByTagName('h4');
        var aUl=oList.getElementsByTagName('ul');
        for(var i =0;i<aH4.length;i++){
            aH4[i].index=i;
             aH4[i].off=true;
            aH4[i].onclick=function(){
                if(this.off){               
                    aUl[this.index].style.display='block';                      
                }else{          
                    aUl[this.index].style.display='none';       
                }       
                this.off=!this.off;     
            }               
        }           
    </script>   
</body>
 </html>