美文网首页
案例三,点击事件购物车,万年历

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

作者: 王哲胜 | 来源:发表于2018-05-28 21:05 被阅读0次

    一.购物车表单框

    例:

        

        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';

              }

              }

    • 相关文章

        网友评论

            本文标题:案例三,点击事件购物车,万年历

            本文链接:https://www.haomeiwen.com/subject/qwdnjftx.html