原生js实现拖拽与缩放等包含js设置样式与五子棋等

最近写五子棋，写着写着，写了几个js特效，感觉还行，发出来分享一下。具体还在调试，如果有alert弹窗部分，大家自己找一下取消掉。我记得缩放的四个边角红色背景色没有去掉，嫌碍事的可以把“background:red;”改为“background:transparent;”即可。有小瑕疵的话，有动手能力的可以自行调试改正。

A. 拖拽部分 ——– 《changer.js》：

var chger_Browser,chger_Stys;// 判断浏览器function chger_GetBrowser(){    if(!!window.ActiveXObject || "ActiveXObject" in window){        return "IE";    }else{        var t=window.navigator.userAgent;        var a=["Opera","FireFox","Chrome","Safari"];        for(var i=0;i<a.length;i++){if(t.indexOf(a[i])+1){return a[i];};};    };  };  /* INIT Borwser Name-------> */ chger_Browser=chger_GetBrowser();//返回HTML元素对象function chger_ReturnHtmlElm(o){    var t=null;    if(typeof(o)=="object"&&o.nodeType==1){        return o;    }else if(typeof(o)=="string"&&!!(t=document.getElementById(o))){        return t;    }else{return false;};};//绑定事件 与 stopBubble 等function chger_AddEvents(o,e,f){ o.attachEvent?o.attachEvent("on"+e,f):o.addEventListener(e,f); };function chger_RemoveEvents(o,e,f){ o.removeEventListener?o.removeEventListener(e,f):o.detachEvent("on"+e,f); };function chger_StopEvents(e){e&&e.preventDefault?e.preventDefault():window.event.returnValue=false;}function chger_StopBubble(e){e&&e.stopPropagation?e.stopPropagation():window.cancelBubble=true;};//样式操作修改 和 获取function chger_CssFunction(){    function ieGet(o,a){ return o.currentStyle[a]; };    function imIeGet(o,a){ return window.getComputedStyle(o,null)[a]; };    this.get=("IE" == chger_Browser?ieGet:imIeGet);    this.set=function(o,s){        if(!o||!s|| typeof(s)!="string"){return false};             s=s.replace(/(\;$)|(^\;)/g,"").split(";");        this.sty=[]; this.o=null;        if(typeof(o.length)=="undefined"){ o=[o]; };        for(var i=0;i<s.length;i++){            this.sty.push([s[i].slice(0,s[i].indexOf(":")),s[i].slice(s[i].indexOf(":")+1,s[i].length)]);        };        for(var i=0;i<o.length;i++){            this.o=chger_ReturnHtmlElm(o[i]);            if(!!this.o){ for(var k=0;k<this.sty.length;k++){ this.o.style[this.sty[k][0]]=this.sty[k][1]; }; };        };    };}; /* INIT cssFunction -------> */ chger_Stys=new chger_CssFunction();// A 透明度改变function chger_Opacity(o,v){    if("IE" == chger_Browser){        o.style.filter="alpha(Opacity:"+parseInt(v)+")";    }else{o.style.opacity=parseInt(v*100)/100;};};// B 大小改变function chger_Position(w,h){    o.style.width=w+"px";    o.style.height=h+"px";};// B-1 createElementfunction chger_CretE(t,ids){    var elm=document.createElement(t); elm.setAttribute("id",ids); return elm;};// C 移动function chger_Mover(o,box,run,show,create){    //【o】:一个移动对象（与chger_Drager配合使用） 【box】:对象的边框，移动不能超出这个边框 【run】:绑定一个运行对象，为一个function对象 【show】:设置true为移动边框，设置false为移动本体，无边框 【create】:无需理会，与new过程有关，外部调用不需要new语句。    if(!chger_ReturnHtmlElm(o)){return null;};    if(!create){return new chger_Mover(o,box,run,show,true);};    this.objer={}; this.boxer={}; this.show=show;    if(typeof(run)=="function"){ this.go=run; }else{this.go=false;};    this.objer.elm=chger_ReturnHtmlElm(o); this.boxer.elm=chger_ReturnHtmlElm(box);    if(!this.boxer.elm){this.boxer.elm=document.body;};    if("static" == chger_Stys.get(this.boxer.elm,"position")){chger_Stys.set(this.boxer.elm,"position:relative;left:0;top:0;");};    if("static" == chger_Stys.get(this.objer.elm,"position")){chger_Stys.set(this.objer.elm,"position:absolute;left:0;top:0;");};    this.objer.width=this.objer.elm.offsetWidth; this.objer.height=this.objer.elm.offsetHeight;    this.boxer.width=this.boxer.elm.offsetWidth; this.boxer.height=this.boxer.elm.offsetHeight;    this.R=this.boxer.width-this.objer.width; this.B=this.boxer.height-this.objer.height;    this.objer.zIndex=parseInt(chger_Stys.get(this.objer.elm,"z-index"));    if(!!this.show){        this.mover=chger_CretE("div","id"+new Date().getTime());        this.objer.elm.parentNode.appendChild(this.mover);        this.mover.style.position="absolute";        this.mover.style.background="transparent";        this.mover.style.width=chger_Stys.get(this.objer.elm,"width");        this.mover.style.height=chger_Stys.get(this.objer.elm,"height");        this.mover.style.left=chger_Stys.get(this.objer.elm,"left");        this.mover.style.top=chger_Stys.get(this.objer.elm,"top");    }else{this.mover=this.objer.elm;};    this.X=this.objer.elm.offsetLeft; this.Y=this.objer.elm.offsetTop;    this.Move=function(x,y){        this.X=(x<0?0:(x>this.R?(this.R<0?0:this.R):x));        this.Y=(y<0?0:(y>this.B?(this.B<0?0:this.B):y));        this.mover.style.left=this.X+"px";        this.mover.style.top=this.Y+"px";        if(this.go){this.go(x,y);};    };  };// D 拖拽function chger_Drager(o,m,bd,create){    //【o】:拖拽触发的对象，注意，不是指拖拽移动的对象 【m】:为一个移动对象，由chger_Mover对象new出来的 【bd】:设置true为不修改边框（不需激活，直接拖拽），为空或设置false为需要激活（激活时边框变为红色） 【create】:无需理会，与new过程有关，外部调用不需要new语句。    if(!chger_ReturnHtmlElm(o)){return null;};    if(!create){return new chger_Drager(o,m,bd,true);};    if(!m||!m.objer||!m.objer.width){ this.oMove=chger_Mover(o,document.body); }else{this.oMove=m;};    this.objer={}; this.bd=bd;    this.objer.elm=chger_ReturnHtmlElm(o);    this.objer.bdwidth=chger_Stys.get(this.objer.elm,"border-width").toString();    this.objer.bdstyle=chger_Stys.get(this.objer.elm,"border-style");    this.objer.bdcolor=chger_Stys.get(this.objer.elm,"border-color");    if(this.objer.bdstyle=="none"){this.objer.bdstyle="solid";};    if(this.objer.bdwidth.search(/[0-9]{1,3}px/)){ this.objer.bdwidth="0px"; };    if("0px"==this.objer.bdwidth && this.bd){this.objer.bdwidth="1px";};    this.closeTim=function(){        if(this.moving){            chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));            chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));            this.moving=false;        };        this.objer.elm.style.borderWidth=this.objer.bdwidth;        this.objer.elm.style.borderColor=this.objer.bdcolor;        this.objer.elm.style.borderStyle=this.objer.bdstyle;        if(this.bd)this.ready=false;    };this.closeTim();    this.press=this.objer.elm.offsetWidth-this.oMove.objer.width;    this.oMove.R -= this.press; this.oMove.B -= this.press;    if(!!this.oMove.show){        this.oMove.mover.style.borderWidth=this.objer.bdwidth;        this.oMove.mover.style.borderColor=this.objer.bdcolor;        this.oMove.mover.style.borderStyle=this.objer.bdstyle;    };    this.choose=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(!this.bd){return false;};        if(!this.ready){            chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));            this.ready=true;            this.objer.elm.style.borderWidth=this.objer.bdwidth;            this.objer.elm.style.borderColor="red";            this.objer.elm.style.borderStyle=this.objer.bdstyle;            this.timer=setTimeout(this.closeTim.bind(this),5000);        }else{            chger_RemoveEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));            this.ready=false; this.closeTim();        };    };    this.mousedown=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(this.ready){            this.CX=e.clientX-this.oMove.objer.elm.offsetLeft; this.CY=e.clientY-this.oMove.objer.elm.offsetTop;            chger_AddEvents(document,"mousemove",this.mousemove.bind(this));            chger_AddEvents(document,"mouseup",this.mouseup.bind(this));            this.moving=true;            if(this.timer){ clearInterval(this.timer); };            if(!!this.oMove.show){this.oMove.mover.style.zIndex=this.oMove.objer.zIndex+1;};        };    };    this.mouseup=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(this.moving){            chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));            chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));            this.moving=false;            if(this.bd){ this.timer=setTimeout(this.closeTim.bind(this),5000); };            if(!!this.oMove.show){                this.oMove.objer.elm.style.left=this.oMove.X+"px";                this.oMove.objer.elm.style.top=this.oMove.Y+"px";                this.oMove.mover.style.zIndex=this.oMove.objer.zIndex-1;            };        };    };    this.mousemove=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(this.moving){            this.oMove.Move(e.clientX-this.CX,e.clientY-this.CY);        };    };    if("absolute" != chger_Stys.get(this.objer.elm,"position")){return false;};    if(!this.bd){        chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));        this.ready=true;    }else{        chger_AddEvents(this.objer.elm,"dblclick",this.choose.bind(this));    };};// E 缩放function chger_Resizer(o,create){    //【o】:拖拽触发的对象，注意，不是指拖拽移动的对象 【m】:为一个移动对象，由chger_Mover对象new出来的 【bd】:设置true为不修改边框（不需激活，直接拖拽），为空或设置false为需要激活（激活时边框变为红色） 【create】:无需理会，与new过程有关，外部调用不需要new语句。    if(!chger_ReturnHtmlElm(o)){return null;};    if(!create){return new chger_Resizer(o,true);};    this.objer={};    this.objer.elm=chger_ReturnHtmlElm(o);    this.objer.width=this.objer.elm.offsetWidth; this.objer.height=this.objer.elm.offsetHeight;    this.objer.left=this.objer.elm.offsetLeft; this.objer.top=this.objer.elm.offsetTop;    this.X=this.objer.left; this.Y=this.objer.top;    this.W=this.objer.width; this.H=this.objer.height;    this.Directer=[true,true,true,true];    this.D=[]; this.I=[]; this.type=false;    this.TL=false; this.TR=false; this.BL=false; this.BR=false;    this.objer.elm.style.overflow="hidden";    this.resize=function(X,Y){        this.W=this.CW+X*this.D[2]; this.H=this.CH+Y*this.D[3];        if(this.W<20){this.W=20;}else{this.X=this.CX+X*this.D[0];};        if(this.H<20){this.H=20;}else{this.Y=this.CY+Y*this.D[1];};        if(this.position){            this.objer.elm.style.left=this.X+"px"; this.objer.elm.style.top=this.Y+"px";        };        this.objer.elm.style.width=this.W+"px";        this.objer.elm.style.height=this.H+"px";        if(1 == this.type){};    };    this.mousedown=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(!this.type){return false;};        this.CW=this.W; this.CH=this.H;        this.CX=this.objer.elm.offsetLeft; this.CY=this.objer.elm.offsetTop;        this.RX=e.clientX; this.RY=e.clientY;        //this.CX=this.RX-this.X; this.CY=this.RY-this.Y;        chger_AddEvents(document,"mousemove",this.mousemove.bind(this));        chger_AddEvents(document,"mouseup",this.mouseup.bind(this));        this.moving=true;    };    this.mousemove=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(!this.moving){return false;};        this.resize(e.clientX-this.RX,e.clientY-this.RY);    };    this.mouseup=function(e){        chger_StopEvents(e);chger_StopBubble(e);        if(this.type){            chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));            chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));            this.type=false; this.moving=false; this.D=[0,0];        };    };    for(var i=0;i<4;i++){        if(!this.Directer[i]){continue;};        this.objer.elm.appendChild(chger_CretE("div",this.objer.elm.id+"_set"+i));        chger_Stys.set($E(this.objer.elm.id+"_set"+i),"position:absolute;background:red;width:10px;height:10px;cursor:crosshair;");    };    if("absolute" != chger_Stys.get(this.objer.elm,"position") && "relative" != chger_Stys.get(this.objer.elm,"position")){chger_Stys.set(this.objer.elm,"position:relative;");};    if("absolute" != chger_Stys.get(this.objer.elm,"position")){this.position=false;}else{this.position=true;};    //绑定指定方位触发器-----下    if(this.Directer[0]){this.TL=$E(this.objer.elm.id+"_set"+0); chger_Stys.set(this.TL,"top:-5px;left:-5px;"); chger_AddEvents(this.TL,"mousedown",function(){this.type="TL";this.D=[1,1,-1,-1]}.bind(this));};    if(this.Directer[1]){this.TR=$E(this.objer.elm.id+"_set"+1); chger_Stys.set(this.TR,"top:-5px;right:-5px;"); chger_AddEvents(this.TR,"mousedown",function(){this.type="TR";this.D=[0,1,1,-1]}.bind(this));};    if(this.Directer[2]){this.BR=$E(this.objer.elm.id+"_set"+2); chger_Stys.set(this.BR,"bottom:-5px;right:-5px;"); chger_AddEvents(this.BR,"mousedown",function(){this.type="BR";this.D=[0,0,1,1]}.bind(this));};    if(this.Directer[3]){this.BL=$E(this.objer.elm.id+"_set"+3); chger_Stys.set(this.BL,"bottom:-5px;left:-5px;"); chger_AddEvents(this.BL,"mousedown",function(){this.type="BL";this.D=[1,0,-1,1]}.bind(this));};    chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));};

B. 五子棋函数 ——– 《freeFunction.html》（在IE下可使用fso，非IE下使用cookie或storage实现保存）：

function Proton(n,len){    n=n.toString(); var a=[]; a[len-n.length]=n; return a.join("0");};function parseTime(n){    n=parseInt(n);    if(n<=0){return "00:00:00";};    return (Proton(parseInt(n/60),2)+":"+Proton(n%60,2));};function FREEFunction(src){    var BigSrc=false,Ftime=new Date().getTime();    var bc="backgroundColor",contraryNUM=[1,0];    var namesArr=["张三丰","李世民","黄蓉","杨过"];    if(fsoTF){if(!ExistsFolder(src)){fsoTF=false;}else{BigSrc=src;};};  //   init BigSrc *******************----------------    //    ***********  open or cret init area  -------------------------    var srcGuest="Guests",gn="/",Txt=".txt";    var guestsLength=10,deskLength=3;    // ***********************   write json area  ----------------------------    this.saveRoom=function(R){ R=(R||oSelf.on); cretF(BigSrc+R+gn+"oRoom"+Txt,JSON.stringify(oRoom)); };    this.saveSelf=function(){ oRoom.time=Ftime; cretF(BigSrc+this.name+Txt,JSON.stringify(oSelf)); };    // ***********************   open json area -----------------    this.openJSON=function(src){var t=openF(src); try{ if(t && typeof(t=JSON.parse(t))=="object"){return t;}else{return {};}; }catch(e){return {};}; };    //************* open oRoom && oSelf area-----------    this.openRoom=function(R){ return this.openJSON(BigSrc+R+gn+"oRoom"+Txt); };    this.openSelf=function(Pip){ return this.openJSON(BigSrc+Pip+Txt); };    //     *************  open guests area ---------------    this.addGuest=function(R){ if(this.getGuests(R).length<guestsLength){cretF(BigSrc+R+gn+srcGuest+gn+this.name+Txt, new Date().getTime()); return true;}else{return false;}; };    this.outGuest=function(R){ deleteFile(BigSrc+R+gn+srcGuest+gn+this.name+Txt); if(this.getGuests(R).length==0){ deleteFolder(BigSrc+oSelf.on); }; };    //*  ***************  getGuestlength area   -----------------    this.getGuests=function(R){var t=[]; var f=fso.getFolder(BigSrc+R+gn+srcGuest),d; d=new Enumerator(f.Files); for(;!d.atEnd();d.moveNext()){ t.push(d.item().name); }; return t; };    var xyLen=0,PA="player1",PB="player2",PAB={}; PAB[PA]=PB;PAB[PB]=PA;    var white="white",black="black",box=[],childrens=[],useRand=-1,onClosing=false;    var oSelf={},oRoom={},json={};    var InRoomTim=0,OutRoomTim=0;    oSelf={Role:{},active:Ftime,on:false,goTiming:PA};      oRoom={player1:false,player2:false,ready:{},onGame:false,frees:[],setTimes:300,gameTime:{},inTime:{},rand:0};    for(var i=0;i<namesArr.length;i++){        var t=this.openSelf(namesArr[i]);        if(!t.active||t.active<(new Date().getTime()-10000)){            this.name=namesArr[i]; oSelf.active=new Date().getTime(); this.saveSelf();            $E("freeBnr3").innerHTML=this.name; break;        };    };    //    player area ****************************************    this.CretOrOutRoom=function(){        if(!this.name){return ;};        if(oSelf.on){            //提示区域 可有可无******************↓            if(oSelf.Role.A){                if(oRoom.onGame&&!window.confirm("你正在进行下子，确定退出房间？")){                    return false;                }else if(!oRoom.onGame&&!window.confirm("你已入座，确定退出房间？")){                    return false;                };            };            //提示区域 可有可无******************↑            this.A_Guest(oSelf.on);        }else{            var t;            for(var i=0;i<deskLength;i++){                t=(i+1)+"桌";if(!ExistsFolder(BigSrc+t)){                    cretFD(BigSrc+t); cretFD(BigSrc+t+gn+srcGuest); this.saveRoom(t);                    this.A_Guest(t); this.B_Player(PA); break;                };            };        };    };    this.A_Guest=function(R,typ){        if(!this.name||(!ExistsFolder(BigSrc+R))){return false;};        if(oSelf.on){            if(!onClosing && this.onGame){alert("A_Guest:is gaming!");return false;};            if(oSelf.Role.A){ this.B_Player(oSelf.Role.A); };            this.outGuest(oSelf.on); oSelf.on=false; oSelf.Role={}; this.saveSelf();            $E("freeBnr1").innerHTML="创建房间"; $E("freeBnr1").style[bc]="#777";            $E("freeMsg0").innerHTML="房间";     $E("freeMsg2").style.display="none";            if(onClosing)alert("A-guest:close");            clearInterval(InRoomTim); OutRoomTim=setInterval(this.searchRooms.bind(this),1000);        }else if(R&&this.getGuests(R).length<guestsLength){            this.addGuest(R); oSelf.on=R; oSelf.Role={}; this.saveSelf();            $E("freeBnr1").innerHTML="退出房间"; $E("freeBnr1").style[bc]="#F55";            $E("freeMsg0").innerHTML=R;          $E("freeMsg2").style.display="block";            clearInterval(OutRoomTim); InRoomTim=setInterval(this.scanRoomDatas.bind(this),500);        };        this.scanRoomDatas();    };    this.B_Player=function(PP){        if(!oSelf.on||(oSelf.Role.A && PP && oSelf.Role.A!=PP)){return false;}else{ oRoom=this.openRoom(oSelf.on); };        if(oSelf.Role.A){            if(!onClosing && this.onGame){alert("B_Player:is gaming!");return false;};            if(oRoom.ready[oSelf.Role.A]){ this.C_Ready(); };            oRoom[oSelf.Role.A]=false; oRoom.inTime[oSelf.Role.A]=new Date().getTime()+1800000; this.saveRoom(); this.scanRoomDatas(); oSelf.Role={}; if(onClosing)alert("B-player:close");        }else if(!oRoom[PP]){            oSelf.Role.A=PP; oSelf.Role.B=PAB[PP];            oRoom[PP]=this.name; oRoom.inTime[PP]=new Date().getTime();            this.saveRoom(); this.scanRoomDatas();        };          };    this.C_Ready=function(){        if(!oSelf.Role.A){return false;}else{ oRoom=this.openRoom(oSelf.on); };        if(oRoom.ready[oSelf.Role.A]){            if(!onClosing && oRoom.onGame){alert("C_Ready:is gaming!");return false;};            this.StopGame(); if(onClosing)alert("C-ready:close");        }else if(oRoom[oSelf.Role.B]){            useRand=-1; this.onGame=false; oRoom.onGame=false;            if(oRoom.inTime[oSelf.Role.A]<oRoom.inTime[oSelf.Role.B]){                useRand=parseInt(Math.random()*10)%2;                oRoom.rand=useRand; oRoom.frees=[];                oRoom.gameTime.player1=oRoom.setTimes;                oRoom.gameTime.player2=oRoom.setTimes;            };//↑ God Area ******---------- ↑ ------****************            oRoom.ready[oSelf.Role.A]=true;            this.saveRoom();        };        this.scanRoomDatas();    };    //    reading Free Area **********************************************    this.clearUI=function(){        for(var i=0;i<childrens.length;i++){ childrens[i].style[bc]="transparent";};        this.oldFreeLen=0; box=[];    };    this.downFreeSacn=function(){        if(box[this.onPiece]!=undefined){return false;};        this.oldFreeLen=oRoom.frees.length; box[this.onPiece] = (oRoom.frees.length%2);        childrens[this.onPiece].style[bc] = (oRoom.frees.length%2==0?white:black);        oSelf.goTiming=PAB[oSelf.goTiming]; this.testWiner(this.onPiece);        if(oRoom.onGame){ $E(oSelf.goTiming+"tim").style.color="#D55"; $E(PAB[oSelf.goTiming]+"tim").style.color="#ACC"; };    };    this.readFrees=function(){        if(oRoom.frees.length>this.oldFreeLen && oRoom.frees.length%2 == useRand){ this.onPiece = oRoom.frees[oRoom.frees.length-1]; this.downFreeSacn(); };    };    this.downFree=function(inx){        this.onPiece=eval(inx); if(oRoom.frees.length%2 == useRand){ oRoom.frees.push(this.onPiece); this.saveRoom(); this.downFreeSacn(); };    };    //    game exists  area  *******************************    this.testWiner=function(inx){        var t=[] ,n=0 ,myX=parseInt(inx/xyLen), itX, winReg=(oRoom.frees.length%2),fullFree;        this.winer=(winReg==1?"黑子":"白子");        function getFullOrOver(drc,rev){            var ft=[]; for(var i=1;i<xyLen;i++){ n=inx+drc*i*rev; itX = parseInt(n/xyLen); if(Math.abs(itX-myX)>i || itX<0||itX>=xyLen || box[n]!=winReg){ return ft; }else{ ft.push(n); }; };        };        function showFullOrOver(arr,sty){            if(sty=="#0F0"||(!fullFree&&sty=="#0CC"))childrens[arr[0]].style.background=sty; for(var i=1;i<arr.length;i++){ childrens[arr[i]].style.background=sty; };        };              for(var i=0;i<4;i++){            t[i]=[inx]; t[i]=t[i].concat(getFullOrOver(arrDirc[i],1)); t[i]=t[i].concat(getFullOrOver(arrDirc[i],-1));            if(t[i].length>5){/* 超出 */}else if(t[i].length==5){this.StopGame();/* 连满 */ alert(this.winer+"获胜！");onGame=false; };        };        $E("showKey2").value=t.join("\n\n");    };    this.StopGame=function(type){        useRand=-1; this.onGame=false; $E("freeBnr2").innerHTML="准备"; $E("freeBnr2").style[bc]="#777";        if(oSelf.goTiming){ $E(oSelf.goTiming+"tim").style.color="#ACC"; };        oRoom.ready={}; oRoom.onGame=false; this.saveRoom();    };    //    scan area *******************************************    this.nolive=function(R,type){        if(type){var t=this.openRoom(R);if(!t.time||t.time<(Ftime-180000)){deleteFolder(BigSrc+R);};};    };    this.startGame=function(){        if(oRoom.inTime[oSelf.Role.A]>oRoom.inTime[oSelf.Role.B]){useRand=contraryNUM[oRoom.rand];};        oRoom.onGame=true; this.saveRoom(); this.onGame=true; this.clearUI();        oSelf.goTiming=(useRand==0?oSelf.Role.A:oSelf.Role.B);        $E(oSelf.goTiming+"tim").style.color="#D55";           };    this.searchRooms=function(){        var str="",strRooms="<div style=\u0022width:100px;height:20px;font-size:16px;background:#777;margin:1px 0px;cursor:pointer;color:white;text-align:center;\u0022 onclick=\u0022$E('freeLists3').innerHTML=this.innerHTML;\u0022>INNEROF</div>";        var f=fso.getFolder(BigSrc);var d=new Enumerator(f.SubFolders);        for(;!d.atEnd();d.moveNext()){ this.nolive(d.item().name,true);str+=strRooms.replace("INNEROF",d.item().name); };        Ftime=new Date().getTime(); $E("freeLists2").innerHTML=str; this.saveSelf();    };    this.scanRoomDatas=function(){        oRoom=this.openRoom(oSelf.on);        if(!oRoom.onGame){ this.showPlayers();  };        this.onGameExists();            if(oRoom.onGame){ this.goTimer(); };        Ftime=new Date().getTime(); this.saveSelf();    };    this.onGameExists=function(){        if(!oSelf.Role.A){            $E("freeBnr2").innerHTML="未入座"; $E("freeBnr2").style[bc]="#777";        }else if(!oRoom[oSelf.Role.B]){            $E("freeBnr2").innerHTML="等待入座"; $E("freeBnr2").style[bc]="#777";  if(this.onGame){this.StopGame();};        }else if(!this.onGame){            if(oRoom.ready[oSelf.Role.A]&&oRoom.ready[oSelf.Role.B]){this.startGame();};this.showReadys();        }else{ this.readFrees(); };    };    this.showPlayers=function(){        if(oRoom.player1){$E("player1").innerHTML=oRoom.player1; $E("player1").style[bc]="#CCC";}else{$E("player1").innerHTML="加入"; $E("player1").style[bc]="#777"; $E(PA+"tim").innerHTML="---"; };        if(oRoom.player2){$E("player2").innerHTML=oRoom.player2; $E("player2").style[bc]="#CCC";}else{$E("player2").innerHTML="加入"; $E("player2").style[bc]="#777"; $E(PB+"tim").innerHTML="---"; };        if(oRoom.onGame){return false;};        if(oRoom.player1&&oRoom.player2){            if(oRoom.inTime.player1<oRoom.inTime.player2){$E(PA+"tim").innerHTML="房主";}else{$E(PB+"tim").innerHTML="房主";};        }else if(oRoom.player1||oRoom.player2){            if(oRoom.player1){$E(PA+"tim").innerHTML="房主";}else{$E(PB+"tim").innerHTML="房主";};        };    };    this.showReadys=function(){        if(!oRoom.ready[oSelf.Role.A]){            $E("freeBnr2").innerHTML="新局发起";$E("freeBnr2").style[bc]="#CCC";        }else{            $E("freeBnr2").innerHTML=oRoom.ready[oSelf.Role.B]?(useRand==1?"对方先":"我方先"):"我方就绪"; $E("freeBnr2").style[bc]="#7F7";        };        $E(oSelf.Role.A).style[bc]="#CC7";    };    this.goTimer=function(){        if(!this.onGame){            if(oSelf.saveTimes!=oRoom.setTimes){ oRoom.setTimes=(oRoom.setTimes<180?180:oRoom.setTimes>1800?1800:oRoom.setTimes); oSelf.saveTimes=oRoom.setTimes; this.saveRoom(); };            if(oRoom.ready.player1){ $E("player1tim").innerHTML=parseTime(oRoom.setTimes); };            if(oRoom.ready.player2){ $E("player2tim").innerHTML=parseTime(oRoom.setTimes); };        }else{            if(oSelf.Role.A == oSelf.goTiming){oRoom.gameTime[oSelf.goTiming]-=0.5;this.saveRoom();};            $E(oSelf.goTiming+"tim").innerHTML=parseTime(oRoom.gameTime[oSelf.goTiming]);        };    };    //    init area *******************************************    var strBackgroundUI="<span style=\u0022width:(1)px;height:(1)px;float:left;border:1px solid black;border-radius:1px;\u0022></span>";    var strFreesUI="<span style=\u0022width:(1)px;height:(1)px;float:left;border:none;border-radius:50%;\u0022 value=\u0022valueInr\u0022 onclick=\u0022FREE.downFree(this.getAttribute('value'));\u0022></span>";    this.initBoxUI=function(siz,len){        $E("freeBox1").innerHTML=""; $E("freeBox2").innerHTML="";        var str1="",str2=""; xyLen=len; arrDirc=[1,len+1,len-1,len]        var strA=strBackgroundUI.replace(/\(1\)/g,siz-2);        var strB=strFreesUI.replace(/\(1\)/g,siz);        for(var i=0;i<len*len;i++){            if(i<=(len*(len-2))){str1+=strA;};            str2+=strB.replace("valueInr",i);        };        Stys.set("freeBox1","border:1px solid black;width:AOFpx;height:AOFpx;top:BOFpx;left:BOFpx;".replace(/AOF/g,siz*(len-1)).replace(/BOF/g,parseInt($E("freeBox2").parentNode.offsetHeight/2-(siz*(len-1)/2))));        Stys.set("freeBox2","width:AOFpx;height:AOFpx;top:BOFpx;left:BOFpx;".replace(/AOF/g,siz*len).replace(/BOF/g,parseInt($E("freeBox2").parentNode.offsetHeight/2-(siz*len/2))));        $E("freeBox1").innerHTML=str1; $E("freeBox2").innerHTML=str2;        childrens=$E("freeBox2").children;    };    //  close Area *********************** *************** *************** ******************    this.close=function(typ){        var t=0;        try{            onClosing=true; t=1;            if(oSelf.on)this.A_Guest(oSelf.on); t=2;            deleteFile(BigSrc+this.name+Txt);        }catch(e){alert("Errors",JSON.stringify(returnError(e)));};    };    //    init this area  ************    if(this.name){OutRoomTim=setInterval(this.searchRooms.bind(this),1000);}else{$E("freeMsg1").innerHTML="游客 无名";};};

C. 辅助五子棋部分 ————— 配合五子棋函数中cookie或storage的函数，用来监测cookie个数或storage个数的函数，辅助部分《getKeyFunctions.js》：

function getKeyTable(){    var elm,nScrollWidth;    getKeyTable.prototype.Targ=this;    elm=document.createElement("div"); elm.setAttribute("id","getKeyTable");    document.body.appendChild(elm);    Stys.set("getKeyTable","width:260px;height:520px;position:absolute;left:3px;top:3px;background:#37F;border:2px solid gray");    //   A    elm=document.createElement("div"); elm.setAttribute("id","showKey0"); elm.onselectstart=new Function("return false");    $E("getKeyTable").appendChild(elm);    Stys.set("showKey0","width:260px;height:18px;fontSize:12px;lineHeight:18px;overflow:hidden;margin:1px 0px;textAlign:cneter;background:#06A;color:#CF0");    elm=document.createElement("span"); elm.setAttribute("id","showKey0_len"); elm.innerHTML="个数";    $E("showKey0").appendChild(elm);Stys.set("showKey0_len","width:60px;height:18px;display:inline-block;textAlign:left");    elm=document.createElement("span"); elm.setAttribute("id","showKey0_title");elm.innerHTML="标题";    elm.onclick=function(){if(this.value=="1"&&confirm('delete this '+this.innerHTML+'?')){if(localStorage){localStorage.removeItem(this.innerHTML);}else{document.cookie=this.innerHTML+"=0;expires="+new Date().toUTCString();};getKeys.show();}else{this.value=1;setTimeout(function(){this.value=0;}.bind(this),200);};};    $E("showKey0").appendChild(elm);Stys.set("showKey0_title","width:150px;height:18px;display:inline-block;wordWrap:break-word;color:#FF0;textAlign:center");    elm=document.createElement("button"); elm.setAttribute("id","showKey0_close");elm.innerHTML="X";    elm.setAttribute("onclick","this.blur();getKeyTable.prototype.Targ.display(false);");    $E("showKey0").appendChild(elm);Stys.set("showKey0_close","width:20px;marginLeft:30px;height:18px;border:none;");    //   B    elm=document.createElement("div"); elm.setAttribute("id","showKey1_back");    $E("getKeyTable").appendChild(elm);    Stys.set("showKey1_back","width:80px;height:500px;overflow:hidden");    elm=document.createElement("div"); elm.setAttribute("id","showKey1");    $E("showKey1_back").appendChild(elm);    Stys.set("showKey1","width:80px;height:500px;wordWrap:break-word;background:#99D;textAlign:left;overflow:scroll");    nScrollWidth=$E("showKey1").offsetWidth-$E("showKey1").clientWidth;    Stys.set("showKey1","width:px1px;height:px2px".replace("px1",80+nScrollWidth).replace("px2",500+nScrollWidth));    //   C    elm=document.createElement("div"); elm.setAttribute("id","showKey2_back");    $E("getKeyTable").appendChild(elm);    Stys.set("showKey2_back","width:180px;height:500px;position:absolute;right:0;top:20px;overflow:hidden");    elm=document.createElement("textarea"); elm.setAttribute("id","showKey2");    $E("showKey2_back").appendChild(elm);    Stys.set("showKey2","width:180px;height:500px;color:white;background:#223;border:none;");    Stys.set("showKey2","width:px1px;height:px2px".replace("px1",180+nScrollWidth).replace("px2",500+nScrollWidth));    this.show=function(){        var elm_tmp;        $E("showKey1").innerHTML="";        if(localStorage){            this.t=FREE.getDatasStorage();        }else{this.t=FREE.getDatasCookie();};        for(var i=0;i<this.t.length;i++){            elm_tmp=document.createElement("button");            elm_tmp.innerHTML = this.t[i][0];            Stys.set(elm_tmp,"width:80px;height:20px;border:none;fontSize:16px;color:#11A;display:block;overflow:hidden");            elm_tmp.setAttribute("onclick","if(localStorage){$E('showKey2').value=localStorage.getItem(this.innerHTML);}else{$E('showKey2').value=openStorage(this.innerHTML);};$E('showKey0_title').innerHTML=this.innerHTML;this.blur();");            $E("showKey1").appendChild(elm_tmp);        };        $E("showKey0_len").innerHTML="数量:"+this.t.length;    };    this.display=function(tf){        if(tf==undefined){            return $E("getKeyTable").style.display!="none";        };        if(tf){            $E("getKeyTable").style.display="block";        }else{            $E("getKeyTable").style.display="none";        };    };    this.display(0);};

D.应用实例部分 ——– 《Free.html》：

<html><head><meta charset="utf-8"/><script src="C:\Users\Administrator\Desktop\CODES\js\changer.js"></script><script>var locationtext=location.href.replace(/(file:\/{0,3})/,"");var txtname=locationtext.match(/[^\/\\]+$/)[0];var txtsrc=locationtext.replace(txtname,"");var fso,fsoTF=(!!window.ActiveXObject || "ActiveXObject" in window);if(fsoTF){fso=new ActiveXObject("Scripting.FileSystemObject");};function $E(ids){    return document.getElementById(ids);};function deleteFolder(src){    if(!fso.FolderExists(src)){return false;};    try{        fso.deleteFolder(src);    }catch(e){alert("deleteFolder\n    "+e.name+":"+e.message);};};function deleteFile(src){    if(!fso.FileExists(src)){return false;};    try{        fso.deleteFile(src);    }catch(e){alert("deleteFile:\n    "+e.name+":"+e.message);};};function ExistsFile(src){    return fso.FileExists(src);};function ExistsFolder(src){    return fso.FolderExists(src);};function openF(src){    if(!ExistsFile(src)){return false;};    var t,f=fso.OpenTextFile(src,1);    if(f.AtEndOfLine){return false;};    t=f.ReadAll(); f.Close();    return t;};function cretF(src,str){    if(!src)return false;    try{        var f=fso.CreateTextFile(src);        f.Write(str); f.Close();    }catch(e){alert("createTextFile:\n    "+e.name+":"+e.message);};};function cretFD(src){    try{        if(!ExistsFolder(src)){            fso.CreateFolder(src);        };    }catch(e){};};function cretf(src,str){    try{        var f=fso.CreateTextFile(src,true);        f.write(str); f.close();    }catch(e){sendError(e.name,e.message);};};function openf(src){    if(!fso.FileExists(src)){return false};    try{        var str,f=fso.OpenTextFile(src,1);        if(!f.AtEndOfLine){            str=f.ReadAll(); f.close();        }else{return false};        return str;    }catch(e){sendError(e.name,e.message);};};function openStorage(nam){    var t;    if(localStorage){        t=localStorage.getItem(nam);    }else{        var cA,c=document.cookie;        if(typeof c!='string'||c.length<2){return false;}else{c=c.split(";");};        for(var i=0; i<c.length; i++){            cA=c[i].split("=");cA[0]=cA[0].replace(/(^\s+)|(\s+$)/g,"");cA[1]=unescape(cA[1]);            if(nam == cA[0]){t=cA[1];break;};        };    };    if(t){        return t;    }else{return false;};};function cretStorage(nam,str){    if(localStorage){        localStorage.setItem(nam,str);    }else{        document.cookie =nam+"="+escape(str)+";expires="+new Date(new Date().getTime()+31*86400000).toUTCString();    };};function sendError(s1,s2){    var str=(s1?s1:"")+(s2?s2:"");    alert(str);};function ExistsDomElm(obj){    if(typeof(obj)=="string" && $E(obj)){        return $E(obj);    }else if(typeof(obj)=="object" && obj.nodeType==1){        return obj;    };};function returnError(e){    if(!(navigator.appName=="Microsoft Internet Explorer")){        return {name:e.name,message:e.message,lineNumber:e.lineNumber,fileName:e.fileName,stack:e.stack};    }else{        return {name:e.name,errorNumber:(e.number&0xFFFF),message:e.message};    };}function styFunction(){    this.get=function(obj,sty){    }    this.set=function(obj,sty){        if(!obj || !sty || typeof(sty)!="string"){return false};        var objs=[],Sty=[],o;        sty=sty.replace(/(\;$)|(^\;)/g,"").split(";");        if(typeof(obj)=="string" || (typeof(obj) == "object" && obj.nodeType==1)){            objs[0]=obj;        }else if(typeof(obj)=="object"&&!obj.length){            objs=[];        }else{objs=obj;};        for(var i=0;i<sty.length;i++){            Sty.push([sty[i].slice(0,sty[i].indexOf(":")),sty[i].slice(sty[i].indexOf(":")+1,sty[i].length)]);        };        for(var i=0;i<objs.length;i++){            o=ExistsDomElm(objs[i]);            if(o && o.nodeType==1){                for(var k=0;k<Sty.length;k++){                    o.style[Sty[k][0]]=Sty[k][1];                };            };        };    };};var Stys=new styFunction();var getKeys;function tipTF(){    var t=document.activeElement.tagName.toUpperCase();    if(t=="TEXTAREA"||t=="INPUT"){return false;}else{return true;};};function stopEvents(e){    if(e.preventDefault){        e.preventDefault();    }else{        e.returnValue=false;    };};function stopBubble(e){    if(e.stopPropagation){        e.stopPropagation();    }else{        e.cancelBubble=true;    };};document.onkeydown=function(e){    e=e||window.event;    keyAct=document.activeElement;    if(tipTF()&&e.keyCode==27){        stopEvents(e); if(getKeys.display()){getKeys.display(false);}else{getKeys.display(true);getKeys.show();};    }else if(tipTF()&&e.keyCode==32){getKeys.show();};};var FREE;window.onbeforeunload=function(){    try{        FREE.close();FREE.deleteSelf();    }catch(e){alert(FREE+"- "+e.name+":"+e.message);};};window.onload=function(){    Stys.set("freeBigBox","width:1300px;height:900px;background:#FFF;border:2px solid black;position:relative;left:0;top:0;margin:auto;");    Stys.set("freeLists","width:100px;height:850px;background:#333;position:absolute;left:0;top:0");    Stys.set("freeBox","width:800px;height:800px;background:#DC7;textAlign:center;position:absolute;left:300px;top:50px;");    Stys.set("freeBnr","width:1300px;height:50px;background:#555;position:absolute;bottom:0;left:0;");    Stys.set("freeMsg","width:1200px;height:50px;background:#225;position:absolute;left:100px;top:0");    Stys.set($E("freeLists").children,"width:100px;fontSize:18px;");    Stys.set($E("freeBnr").children,"width:80px;height:30px;fontSize:12px;border:none;background:#777;vertical:middle;margin:10px 3px;");    Stys.set($E("freeMsg").children,"height:50px;fontSize:24px;position:absolute;top:0;");    Stys.set(["freeBox1","freeBox2"],"position:absolute;");    Stys.set("freeMsg0","width:100px;left:0;color:#FAA;fontSize:16px;textAlign:center;lineHeight:50px;");    Stys.set("freeMsg1","width:900px;left:100px;color:#AAF;textAlign:center;lineHeight:50px;");    Stys.set("freeMsg2","width:200px;right:0;fontSize:12px;background:none;");    Stys.set(["player1","player2"],"width:95px;height:20px;fontSize:14px;color:black;border:none;background:#777;verticalAlign:middle;");    Stys.set(["player1"],"margin:4px 2px 0px 3px;");    Stys.set(["player2"],"margin:4px 3px 0px 2px;");    Stys.set(["player1tim","player2tim"],"width:95px;height:20px;color:#ACC;border:none;background:#245;verticalAlign:middle;");    Stys.set(["player1tim"],"margin:0px 2px 5px 3px;");    Stys.set(["player2tim"],"margin:0px 3px 5px 2px;");    Stys.set("freeLists3","height:25px;color:red;border:none;background:#322;");    Stys.set("freeLists2","height:800px;overflow:hidden;");    Stys.set("freeLists1","height:25px;color:#CCF;textAlign:center;");    Stys.set("testEvalArea","width:300px;height:40px;border:none;background:#999;color:white;display:block;");    Stys.set("showevalError","width:300px;height:40px;border:none;background:#555;color:#AFF;display:block;");    cretFD(txtsrc+"Zone/");    FREE=new FREEFunction(txtsrc+"Zone/");    FREE.initBoxUI(30,16);    var drg2=chger_Drager("freeLists");    var siz1=chger_Resizer("freeLists");    var siz2=chger_Resizer("freeBigBox");    getKeys=new getKeyTable();    setInterval(getKeys.show,500);    initClicks();};function initClicks(){    $E("freeLists3").onclick=function(){        var t=this.innerHTML;        if(t.length){            FREE.A_Guest("#"+t,true);        };    };    $E("freeBnr1").onclick=function(){        FREE.startCreateRoom();    };    $E("freeBnr2").onclick=function(){        FREE.C_Ready();    };    $E("player1").onclick=function(){        FREE.B_Player("player1");    };    $E("player2").onclick=function(){        FREE.B_Player("player2");    };}</script></head><body>    <div id="freeBigBox">        <div id="freeLists">            <div id="freeLists1">标题</div>            <div id="freeLists2"></div>            <button id="freeLists3">确认</button>        </div>        <div id="freeBox">            <div id="freeBox1"></div>            <div id="freeBox2"></div>            <div id="freeBox3"></div>        </div>        <div id="freeBnr">            <button id="freeBnr1">创建房间</button>            <button id="freeBnr2">就绪</button>            <button id="freeBnr3">name</button>        </div>        <div id="freeMsg">            <div id="freeMsg0">FREE ROOM</div>            <div id="freeMsg1">FREE GAME</div>            <div id="freeMsg2"><button id="player1">1</button><button id="player2">2</button><button id="player1tim">00:00:00</button><button id="player2tim">00:00:00</button></div>        </div>    </div>    <div style="position:absolute;left:5px;bottom:4px;border:1px solid red;">        <textarea id="testEvalArea" onblur="try{$E('showevalError').value=eval(this.value);}catch(e){$E('showevalError').value=e.name+':'+e.message;};"></textarea>        <textarea id="showevalError" onblur="try{}catch(e){};"></textarea>    </div>    <script src="C:\Users\Administrator\Desktop\CODES\freeFunctions.js"></script>    <script src="C:\Users\Administrator\Desktop\CODES\getKeyFunctions.js"></script></body></html>

XXXXX. 赠品部分 —————– 附加一个前段时间写的拖拽、淡入淡出、自动缩放功能的《E_drag.js》库函数：

Function.prototype.bindof = function(othis){//添加bind函数    var self = this;    var args = Array.prototype.slice.call(arguments,1);    return function(){        return self.apply(othis,args.concat(Array.prototype.slice.call(arguments)));    }};function operateEvents(obj,evn,typ,fn){    typ?(obj.attachEvent?obj.attachEvent("on"+evn,fn):obj.addEventListener(evn,fn)):(obj.removeEventListener?obj.removeEventListener(evn,fn):obj.detachEvent("on"+evn,fn));};function stopEvents(e){e&&e.preventDefault?e.preventDefault():window.event.returnValue=false;}function stopBubble(e){e&&e.stopPropagation?e.stopPropagation():window.cancelBubble=true;};function timesFunc(){    var tims=[];    this.set=function (nam,fun,typ,tim){        var tf=false;        if(typ){            for(var i=0;i<tims.length;i++){                if(tims[i][0]==nam){                    tf=true;tims[i]=[nam,fun,tim];break;                };            };            if(tf)tims.push([nam,fun,tim]);            if(this[nam])clearInterval(this[nam]);            this[nam]=setInterval(fun,tim);        }else{            if(this[nam])clearTimeout(this[nam]);            this[nam]=setTimeout(fun,tim);        };    };    this.close=function(nam,typ){        if(typ){            if(this[nam]){clearInterval(this[nam]);this[nam]=false;};        }else{clearTimeout(this[nam]);this[nam]=null;};    };    this.showTims=function(){        return tims;    };};var otims=new timesFunc();function exelm(elm){//验证元素函数    var obj;    if("string" == typeof elm){        obj=document.getElementById(elm);        return obj&&obj.tagName?obj:false;    }else{        return elm&&elm.tagName?elm:false;    };};function getstyle(){//获取样式函数    var styUp, styLow, LowOrUp = null;    this.upper=function(val){        val=val.match(/[a-zA-z]{1,}/g); if(val==null)return '';        for(var i = 1;i<val.length; i++)val[i]=val[i].charAt(0).toUpperCase()+val[i].slice(1,val[i].length);        return val.join("");    };    this.lower=function(val){        val=val.match(/(^[a-z]+)|([A-Z]?[a-z]+)/g); if(!val)return false;        for(var i=0; i<val.length; i++)val[i]=val[i].toLowerCase();        return val.join("-");    };    this.comstyle = function(obj,val,show){        if(!(typeof obj=="object")||!obj.tagName)return "0";        if(LowOrUp){            styUp = window.getComputedStyle(obj,null)[this.upper(val)];            if(styUp == undefined){LowOrUp = false;};            return styUp;        }else if(LowOrUp == null){            styUp = window.getComputedStyle(obj,null)[this.upper(val)];            styLow = window.getComputedStyle(obj,null)[this.lower(val)];            if(styUp!=undefined){LowOrUp = true;return styUp;}else if(styLow != undefined){LowOrUp = false;return styLow;}else{alert("Error Aruments!");return "Error Aruments!";};        }else{            styLow = window.getComputedStyle(obj,null)[this.lower(val)];            if(styLow == undefined){LowOrUp = true;};            return styLow;        };    }    this.curstyle = function(obj,val,show){        if(!(typeof obj=="object")||!obj.tagName)return "0";        if(LowOrUp){            styUp = obj.currentStyle[this.upper(val)];            if(styUp == undefined){LowOrUp = false;};            return styUp;        }else if(LowOrUp == null){            styUp = obj.currentStyle[this.upper(val)];            styLow = obj.currentStyle[this.lower(val)];;            if(styUp!=undefined){LowOrUp = true;return styUp;}else if(styLow != undefined){LowOrUp = false;return styLow;}else{alert("Error Aruments!");return "Error Aruments!";};        }else{            styLow = obj.currentStyle[this.lower(val)];            if(styLow == undefined){LowOrUp = true;};            return styLow;        };    }    this.get = (window.getComputedStyle?this.comstyle:this.curstyle);};function DragAreaFunction(dragObj,mov,ctlTf){//拖拽位置函数    function initf(dragObj,mov){        var objtmp=new DragAreaFunction(dragObj,mov);        return objtmp.obj?objtmp:false;    };    this.init=initf;    if(0 == arguments.length)return this.init;//if srguments is null. then return init(function) for create new Object    if(!exelm(dragObj)){alert("失败！dragObj is null/Error:stoping...");return false;};    this.obj=exelm(dragObj);    if(typeof(mov)=="object"&&mov.obj){this.oMove=mov;}else{alert("oMove is null/Error:create new oMove...");this.oMove=MoveAreaFunction()(dragObj);};    this.closetim="close"+new Date().getTime()+Math.random();    this.demovef=function(){this.onbeforeReadyMove(1);otims.close(this.closetim,false);}    this.demove=function(close){        close?otims.close(this.closetim,false):otims.set(this.closetim,this.demovef.bindof(this),false,1000);    };    this.onbeforeReadyMove=function(e){        if(ctlTf)return false;        if(e!=1){            e= window.event||arguments[arguments.length-1];            stopEvents(e); stopBubble(e);        };        this.onready=this.onready?false:true;        this.obj.style.border=this.onready==true?"1px solid #F00":"1px solid "+this.oMove.border;        this.move=false;        this.onready?this.demove():this.demove(true);    };    this.onReadyMove=function(e){        e= window.event||arguments[arguments.length-1];        stopEvents(e); stopBubble(e);        if(this.onready||ctlTf){            this.move=true; this.demove(true);            this.defferX = e.clientX - this.oMove.obj.offsetLeft;            this.defferY = e.clientY - this.oMove.obj.offsetTop;            operateEvents(document,"mousemove",true,this.onMove.bindof(this));        };    };    this.onMove=function(e){        e= window.event||arguments[arguments.length-1];        stopEvents(e); stopBubble(e);        if(this.move){            this.oMove.move(e.clientX - this.defferX,e.clientY - this.defferY);        };    };    this.end=function(){        e= window.event||arguments[arguments.length-1];        stopEvents(e);stopBubble(e);        if(this.onready||ctlTf){            this.move=false;            operateEvents(document,"mousemove",false,this.onMove.bindof(this));            this.demove();        };    };    operateEvents(this.obj,"dblclick",true,this.onbeforeReadyMove.bindof(this,12,23));    operateEvents(this.obj,"mousedown",true,this.onReadyMove.bindof(this));    operateEvents(document,"mouseup",true,this.end.bindof(this));};function MoveAreaFunction(obj,box,gorun,nobd){//移动位置函数    function initf(obj,box,gorun){        var objtmp=new MoveAreaFunction(obj,box,gorun);        return objtmp.obj?objtmp:false;    };    this.x=0;this.y=0;    this.init=initf;    if(arguments.length == 0){return this.init;};//if srguments is null. then return init(function) for create new Object    if(!exelm(obj)){alert("失败！MoveAreaFunction:obj is null/Error!stoping...");this.obj=false;return false};    this.obj=exelm(obj);    if(typeof(box)=="function"&&gorun==undefined){this.goRun=box;}else if(exelm(box)){        this.box=(this.obj==exelm(box)?(exelm(box).parentNode?exelm(box).parentNode:null):exelm(box));    };//else{alert("set Box: unknow Error:stoping...");gorun=false;};    if(gorun){this.goRun=gorun;};    this.sty=new getstyle();    if(this.sty.get(this.obj,"border-style")!='none'&&this.sty.get(this.obj,"borderColor")){            this.border=this.sty.get(this.obj,"borderColor");    }else{this.border=this.sty.get(this.obj,"background-color");!this.border?this.border="black":null;};    if(!nobd)this.sty.get(this.obj,"border-width")=="0px"||this.sty.get(this.obj,"border-width")==""?this.obj.style.border="1px solid "+this.border:null;    if(this.box)this.limits=[0,0,this.box.offsetWidth-this.obj.offsetWidth,this.box.offsetHeight-this.obj.offsetHeight];    this.setGoRun=function(gorun){this.goRun=gorun;};    this.move=function(x,y){        if(this.limits){            this.x = (x<this.limits[0]?this.limits[0]:(x>this.limits[2]?this.limits[2]:x));            this.y = (y<this.limits[1]?this.limits[1]:(y>this.limits[3]?this.limits[3]:y));        };        this.obj.style.left=this.x+"px";        this.obj.style.top=this.y+"px";        if(this.goRun){this.goRun(this.x,this.y);};    };};function runSizeTimer(obj){    if(!exelm(obj)){return function(){alert("元素错误！Element is illegal!")};};    obj = exelm(obj);    this.reverse = 1; this.gotim = 0;    this.precition = 1000000; this.speed =5; this.opatf = false;    this.helps=function(){        alert("  [opacity]:  set 0-100 _value\n  [position]:  change Left_set MaxPixle(+-)_value\n  [position_L]:  this too\n  [position_T]:  this too\n  [amplify]:  change left and amplify Elements_set LeftAndRightPixeleValue(+-)\n  [amplify_LT]:  this too\n  [amplify_LB]:  this too\n  [amplify_RT]:  this too\n  [amplify_RB]:  this too\n\nEND...");    };    this.widthf=function(a,b,pct){        if(a)            obj.style.width = parseInt(this.myX*pct)+"px";        if(b)            obj.style.height = parseInt(this.myY*pct)+"px";    };    this.opacityf=function (pct){        obj.style.filter= "alpha(Opacity:"+parseInt(this.myX*pct)+")";obj.style.opacity=parseInt(pct*10)/10;        if(obj.currentStyle)document.title=parseInt(this.myX*pct);    };    this.positionf=function (a,b,pct){        document.title=this.size;        if(a)            obj.style.left = parseInt(this.myX+this.size*pct)+"px";        if(b)            obj.style.top = parseInt(this.myY+this.size*pct*this.multiple)+"px";    };    this.amplifyf=function (a,b,pct){        if(a)            obj.style.left = parseInt(this.myX+this.size*(1-pct))+"px";        if(b)            obj.style.top = parseInt(this.myY+this.size*(1-pct)*this.multiple)+"px";        obj.style.width = parseInt(this.myW*pct)+"px";        obj.style.height = parseInt(this.myH*pct)+"px";    }    this.runaway=function(){        this.percents += this.percenter*this.reverse; this.percenter=parseInt(this.percenter*this.quiken*1000)/1000;        if(this.percents>=this.max){            this.percents = this.max;            this.closetf = true;        }else if(this.percents<=this.min){            this.percents = this.min;            this.closetf = true;        };        switch(this.type){            case "opacity":this.opacityf(this.percents/this.precition); break;            case "position":this.positionf(1,1,this.percents/this.precition); break;            case "position_L":this.positionf(1,0,this.percents/this.precition); break;            case "position_T":this.positionf(0,1,this.percents/this.precition); break;            case "amplify":this.amplifyf(1,1,this.percents/this.precition); break;            case "amplify_LT":this.amplifyf(0,0,this.percents/this.precition); break;            case "amplify_LB":this.amplifyf(0,1,this.percents/this.precition); break;            case "amplify_RT":this.amplifyf(1,0,this.percents/this.precition); break;            case "amplify_RB":this.amplifyf(1,1,this.percents/this.precition); break;            default:return false;        };        if(this.type.search(/position/)+1&&this.opatf){            this.opacityf(1-this.percents/this.precition);        }else if(this.type!="opacity"&&this.opatf){            this.opacityf(this.percents/this.precition);        };        if(this.closetf){            clearInterval(this.gotim); return false;        };    };    this.togo=function(tims,opa_tf,quik){        this.percenter = parseInt((this.speed/tims)*this.precition); this.reverse *= -1; this.closetf =false; this.opatf = opa_tf;        if(quik){            this.quiken = (quik<0.9835?0.9835:quik>1.05?1.05:quik);        }else{this.quiken = 1;};        switch(this.type){            case "opacity":this.nowvalue = stys.get(obj,"opacity"); this.datumvalue = obj.currentStyle?1:1; break;            case "position":this.nowvalue = getlefttop(obj,"left")-this.myX; this.datumvalue = this.size; break;            case "position_L":this.nowvalue = getlefttop(obj,"left")-this.myX; this.datumvalue = this.size; break;            case "position_T":this.nowvalue = getlefttop(obj,"top")-this.myY; this.datumvalue = this.size; break;            case "amplify":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;            case "amplify_LT":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;            case "amplify_LB":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;            case "amplify_RT":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;            case "amplify_RB":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;            default:return false;        };        this.percents = parseInt(this.datumvalue!=0?this.nowvalue/this.datumvalue*this.precition:0);        clearInterval(this.gotim); this.gotim = setInterval(this.runaway.bindof(this),this.speed);    };    this.set=function(typ,mi,ma,siz){        if(arguments.length == 0){this.helps();}        this.min = (mi<0?0:mi>ma?ma/100*this.precition:mi/100*this.precition);        this.max = (ma>100?1*this.precition:ma<this.min/this.precition*100?this.min/this.precition*100:ma/100*this.precition);        this.type = typ;         if(typeof siz == "string"){            if(siz.search(/all/)+1){                this.size = obj.offsetWidth;            }else{                this.size = siz.search(/half/)+1?obj.offsetWidth/2:siz.search(/\-?[0-9]{1,4}px/)+1?eval(siz.replace(/[^0-9]/g,'')):siz.search(/^\-?[0-9]{1,4}$/)+1?eval(siz.replace(/[^0-9]/g,'')):3;            };            siz.search(/\-/)+1?this.size*=-1:null;        }else{            this.size = parseInt(siz)+1?siz:3;        };        if(this.size && this.type.search(/(position)|(amplify)/)+1){                        this.myX = getlefttop(obj,"left"); this.myW = obj.offsetWidth; this.myY = getlefttop(obj,"top"); this.myH = obj.offsetHeight;            this.multiple = this.myH/this.myW;            this.type.search(/amplify/)?this.reverse *= -1:null;        }else if("opacity" == this.type){            this.myX = (obj.currentStyle?100:1);        };    }};function getlefttop(obj,str){return parseInt(stys.get(obj,str));};function amplifyReduce(elm,filter){//自动缩放函数 带淡入淡出    function init(elm,filter){        var objtmp = new amplifyReduce(elm,filter);        return !objtmp.obj?false:objtmp;    };    if(!arguments.length)return init;    if(!exelm(elm)){alert(exelm(elm)+" no Found this Element!");return false;};    this.obj = exelm(elm);    if(filter)this.Filter = true;    this.toInout = 1;    this.setwidth = this.obj.offsetWidth;    this.setheight = this.obj.offsetHeight;    this.widthMultiple = parseInt(this.setwidth/this.setheight*100000)/100000;    this.tims = 5;    this.chgsize=function(x,y,opa){        this.obj.style.width = parseInt(x)+"px";        this.obj.style.height = parseInt(y)+"px";        if(this.Filter){            this.obj.style.opacity = opa/100;            this.obj.style.filter = "alpha(Opacity:"+opa+")";        };        //document.title=show+"_"+x+":"+y+":"+opa;    }    this.toInAndOut=function(){        this.X += this.toInout*this.runwidth; this.Y = this.X/this.widthMultiple;        if(this.X<=0 || this.X>=this.setwidth){            this.X = this.setwidth*(this.toInout+1)/2;            this.Y = this.setheight*(this.toInout+1)/2;            this.chgsize(this.X,this.Y,100*(this.toInout+1)/2,true);            clearInterval(this.tim);return false;        };        this.chgsize(this.X,this.Y,parseInt(this.X/this.setwidth*100));        document.getElementById("test2").innerHTML=new Date().toLocaleTimeString();    }    this.go=function(tims,elms){        if(!tims)tims=1;        this.runwidth = this.setwidth/(tims/this.tims);        this.toInout *= -1;        this.X = this.obj.offsetWidth;        clearInterval(this.tim); this.tim = setInterval(this.toInAndOut.bind(this),this.tims);    }};