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