案例三，点击事件购物车，万年历

一．购物车表单框

例：

    

    Document

    table{

        width: 800px;

        height: 400px;

        border: 1px solid black;

    }

    tr,th{

        border: 1px solid black;

    }

    td{

       text-align: center;

        border: 1px solid black;

    }

    }

    

商品

单价

数量

小计

苹果

            ¥9987

            +1-

            ¥9987

华为

            ¥5666

            +1-

            ¥5666

小米

            ¥100000

            +1-

            ¥100000

合计

            ¥115563

    

        function an(btn){

           var d=btn.parentElement.querySelector('span');

            var n=d.innerHTML;

            if(btn.innerHTML=='+'){

                n++;

            }else if(n>1){

                n--;

            }else{

                n=1;

            }

            d.innerHTML=n;

     var he=btn.parentElement.previousElementSibling.innerHTML.slice(1);  

            var ji=he*n;

            btn.parentElement.nextElementSibling.innerHTML='¥'+ji.toFixed(2);

      var jia=document.querySelectorAll('tbody tr')

      console.log(jia)

        var zongjia=document.querySelector('tfoot tr').lastElementChild;

            console.log(zongjia)

            for(var i=0,j=0;i

                j+=parseInt(jia[i].lastElementChild.innerHTML.slice(1));

                zongjia.innerHTML='¥'+j;

            }

        }

二．万年历点击日期背景色变化，下方同时出现内容

例：

    

    Document

    

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        bo{

        }

        ul{

            width: 440px;

            height: 400px;

            overflow: hidden;

            background: white;

        }

        ul>li{

            width:100px;

            height: 100px;

            float: left;

            text-align: center;

            margin-top: 30px;

            line-height: 50px;

            background: black;

            color: white;

            margin-left: 10px;

        }

        ul>li>span{

            display: none;

        }

        .zi p{

            width: 400px;

            height: 100px;

            background: #666;

            margin-left: 20px;

        }

    

        

            

                

1

                

pve

                11111111111111

            

                

2

                

pve

                  11112222221

            

                

3

                

pve

                  111113333333311

            

                

4

                

pve

                  11111111444444111

            

                

5

                

pve

                  11155555551

            

                

6

                

pve

                  1116666661

            

                

7

                

pve

                  1177777771111

             

                

8

                

pve

                  1188888881111

             

                

9

                

pve

                  11999999991111

             

                

10

                

pve

                  10101010

             

                

11

                

pve

                  11111111111111

             

                

12

                

pve

                  1212121

    

    

         var li=document.querySelectorAll('.bo>ul>li');

        var zi=document.querySelector('.zi>p');

        for(var i=0;i

            li[i].onclick=function(){

                this.style.background='white';

                this.firstElementChild.style.color='cyan';

                zi.innerHTML=this.lastElementChild.innerHTML;

            }

            li[i].onmouseout=function(){

                this.firstElementChild.style.color='white';

                this.style.background='black';

        }

        }