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.onclick=function(e){

   var evt=e||event;

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

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

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

   }

}

obtn.onclick=function(){

    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.onmousedown=function(e){ //按下鼠標的事件

var evt=e||event;

var lf=evt.offsetX;

var tp=evt.offsetY;

document.onmousemove=function(e){ //鼠標移動事件

   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.onmouseup=function(){  //鼠標擡起事件

    document.onmousemove=null;

}}

九宮格
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].onmousedown=function(e){

        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.onmousemove=function(e){

            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.onmouseup=function(){

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

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

            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.onmousemove=null;

            document.onmouseup=null;

        }

    }

}

軌跡
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.onmousemove=function(e){

    var evt = e || event;

    var x = evt.clientX;

    var y = evt.clientY;

    arr.push({pagex:x,pagey:y}); //採用對象數組存儲,因爲座標成對好進行操作

    return false;  //取消瀏覽器的默認行爲

    //console.log(arr);

}

document.onmouseup=function(){

    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.onmousemove=null;

}}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章