好程式設計師web前端教程分享前端javascript練習題二

　　好程式設計師web 前端教程分享 前端javascript 練習題， 事件委託機制 ---------- 重要

　　eg：點選按鈕往ul中新增li，使新增的li也有相同的事件

var obtn=document.getElementById("btn");

    var olist=document.getElementById("list");  //獲取ul

    var oli=olist.children;  //獲取ul的子節點li

   olist.>

       var evt=e||event;

       var tar=evt.target||evt.srcElement;  //獲取事件源

       if(tar.nodeName.toLowerCase()=="li"){   判斷事件源是不是是該執行目標

           console.log(tar.innerHTML); //此時不能用this，因為this指向的是ul

       }

   }

    obtn.>

        for(var i=0;i<4;i++){

            var lli=document.createElement("li");

            lli.innerHTML="aaaa";

            olist.appendChild(lli);

        }

    }

拖拽效果

var odiv=document.getElementsByTagName("div")[0];

odiv.>

    var evt=e||event;

    var lf=evt.offsetX;

    var tp=evt.offsetY;

  document.>

       var evt=e||event;

        var x=evt.clientX-lf;  //讓滑鼠一直在按下的那個位置

       var y=evt.clientY-tp;

      //設定元素只能在可視區域內移動

      if(x<=0){

          x=0;

      }

      if(x>=document.documentElement.clientWidth-odiv.offsetWidth){

        x=document.documentElement.clientWidth-odiv.offsetWidth

      }

      if(y<=0){

          y=0;

      }

        if(y>=document.documentElement.clientHeight-odiv.offsetHeight){

            y=document.documentElement.clientHeight-odiv.offsetHeight;

        }

      odiv.style.left=x+"px";  //讓元素跟著滑鼠移動

      odiv.style.top=y+"px";

    }

    document.>

        document.>

    }}

九宮格
js程式碼：

var obox=document.getElementById("box");

    //建立結構

    for(var i=0;i<3;i++){  //控制外層的行數

        for(var j=0;j<3;j++){  //控制內層

            var odiv=document.createElement("div");

            obox.appendChild(odiv);

           /* var r=Math.floor(Math.random()*256);

            var g=Math.floor(Math.random()*256);

            var b=Math.floor(Math.random()*256);*/

            odiv.style.backgroundColor="rgb("+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+")";  //字串拼接

            odiv.style.left=j*(odiv.offsetWidth+10)+"px";

            odiv.style.top=i*(odiv.offsetHeight+10)+"px";

 

        }

    }

    var strarr=["a","b","c","d","e","f","g","h","i","m"];

    var child=obox.children;

    //給每個小塊加上文字

    for(var i=0;i<child.length;i++){

        child[i].innerHTML=strarr[i];

    }

    //拖拽

    for(var i=0;i<child.length;i++){

        child[i].>

            var evt=e||event;

            var lf=evt.offsetX;

            var tp=evt.offsetY;

            var current=this;  //將this儲存current中 ，因為上下指向的this不同

            //因為拖動的時候原位置，還需要有東西，所以才克隆

            var clone=current.cloneNode(); //克隆一個當前的元素，並新增到盒子裡

                clone.style.border="1px dashed #000";//            obox.appendChild(clone);  //因為新增之後克隆的索引在最後，// 後面需要進行距離比較，所以需要將克隆節點和當前節點進行替換

            obox.replaceChild(clone,current);  //用克隆的節點替換當前節點

            obox.appendChild(current);  //把當前節點加到盒子裡

            current.style.zIndex=1;

            document.>

                var evt=e||event;

                var x= e.clientX-lf-obox.offsetLeft;

                var y= e.clientY-tp-obox.offsetTop;

                //當前物件的座標：隨著滑鼠移動

                current.style.left=x+"px";

                current.style.top=y+"px";

                return false;  //取消預設行為

            }

            document.>

                //將當前的這個和剩下所有的進行比較，找出距離最近的

                //將當前放到距離最近的位置，最近的那個放到克隆的位置

                var arr=[];

                var newarr=[];

                //以為此時當前節點的索引在最後，不需要和自身比較，所以去掉最後一個索引

                for(var i=0;i<child.length-1;i++){

                    var wid=current.offsetLeft-child[i].offsetLeft;

                    var hei=current.offsetTop-child[i].offsetTop;

                    var juli=Math.sqrt(Math.pow(wid,2)+Math.pow(hei,2));

                    arr.push(juli);

                    newarr.push(juli);

                }

                arr.sort(function(a,b){

                    return a-b;

                })

                var min=arr[0];

                var minindex=newarr.indexOf(min);

 

                //交換位置：當前的座標為最小距離對應的位置，最小值的放在克隆所在的位置

                current.style.left=child[minindex].style.left;

                current.style.top=child[minindex].style.top;

 

                child[minindex].style.left=clone.style.left;

                child[minindex].style.top=clone.style.top;

 

                obox.removeChild(clone); //交換位置之後將克隆的節點刪除

                document.>

                document.>

            }

        }

    }

軌跡
js程式碼：

var odiv = document.getElementsByTagName("div")[0];var arr=[];  //用來儲存滑鼠移動時的座標位置

document.onmousedown = function (e) {

    var evt1 = e || event;

    var x=evt1.clientX;

    var y=evt1.clientY;

    arr.push({pagex:x,pagey:y});

    document.>

        var evt = e || event;

        var x = evt.clientX;

        var y = evt.clientY;

        arr.push({pagex:x,pagey:y}); //採用物件陣列儲存，因為座標成對好進行操作

        return false;  //取消瀏覽器的預設行為

        //console.log(arr);

    }

    document.>

        var timer=setInterval(function(){

            odiv.style.left=arr[0].pagex+"px";

            odiv.style.top=arr[0].pagey+"px";

            arr.splice(0,1); //讓元素座標始終從0開始，splice會改變原陣列長度

            if(arr.length==0){ //當陣列長度為0，說明儲存的座標執行完了

                clearInterval(timer);

            }

        },20);

        document.>

    }}