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