共有フロントエンドWebフロントエンドJavaScriptのチュートリアル演習に良いプログラマ

　　重要----------イベント委譲メカニズム、共有フロントエンドWebフロントエンドへのプログラマはチュートリアル演習をJavaScriptの良い
　　例：リチウム中のLi ULを追加するボタンをクリックしても同じイベントを追加
VAR obtn =のdocument.getElementByIdを（ "BTN"）;
VAR OLIST =のdocument.getElementById（ "リスト"）; //取得UL
VAR OLI = olist.children; //取得した子ノード李UL
olist.onclick =機能（E）{
VARのEVT = Eイベント||;
VAR = evt.targetタール|| evt.srcElement; //イベントソース取得
の場合（tar.nodeName.toLowerCase（）== "李は "）{ イベント・ソースは、実行対象と判定されなかった
にconsole.log（ tar.innerHTML）;この点は、ULであるため、//この場合は、使用できない
}
}
obtn.onclick =関数（）{
I <4;; I ++）{（VAR I = 0のための
VAR LLI =のdocument.createElement（ "李"）;
lli.innerHTML = "AAAA";
olist.appendChild（LLI）;
}
}
ドラッグ効果
odiv =文書VAR。getElementsByTagNameの（ "DIV"）[0];
odiv.onmousedown =関数（E）{//プレスマウスイベント
VAR = E || EVTイベント;
VAR LF = evt.offsetX;
VAR TP = evt.offsetY;
document.onmousemove =関数（E）{//マウス移動事象
VAR = E || EVTイベント;
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）{
0 = Y;
}
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 =関数（）{//イベントアップマウス
document.onmousemove = NULL;
}}
乗
JSコード：
VAR = Oboxのdocument.getElementById（ "ボックス"）;
//構造作成
I = 0（VARのために、 I <3; I ++）{ //は、外側の列の数を制御する
（VARのJ = 0; J <3; J ++）{// 内部制御
VAR odiv =のdocument.createElement（ "DIV"）;
obox.appendChild（ odiv）;
/ VAR = R＆LT Math.floor（Math.random（） 256）;
VAR Math.floor G =（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。左= 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 =関数（E）{
VARのEVT1 = Eを| |イベント;
VAR X = evt1.clientX;
VAR Y = evt1.clientY;
arr.push（{pageX：X、pageY：Y}）;
document.onmousemove =関数（E）{
VAR = E || EVTイベント、
VAR evt.clientX = X;
VAR Y = evt.clientY;
arr.push（{pageX：X、pageY：Y}）; //オブジェクト・ストレージ・アレイ、座標対の良い動作ので
戻り偽; //ブラウザをキャンセルデフォルト動作の
//console.log(arr）;
}
document.onmouseup =関数（）{
VARタイマ=たsetInterval（関数（）{
odiv.style.left ARR = [0] + .pagex "PX";
odiv.style。 =トップARR [0] + .pagey "PX";
arr.splice（0、1）; //要素の座標は常に0で開始させ、スプライス配列の元の長さを変化させます
IF（arr.length == 0）{//配列の長さが上保存実行の座標ことを示し、ゼロであるとき
てclearInterval（タイマ）;
}
）}、20であり;
document.onmousemove = NULL;
}}

共有フロントエンドWebフロントエンドJavaScriptのチュートリアル演習に良いプログラマ

おすすめ