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

最新推荐文章于 2022-07-22 14:50:43 发布

LowsynDecdark

最新推荐文章于 2022-07-22 14:50:43 发布

阅读量578

点赞数

分类专栏：拖拽 js 缩放五子棋 html 文章标签： js 拖拽缩放淡入淡出五子棋

本文链接：https://blog.csdn.net/oJinLe/article/details/78808270

版权

拖拽同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

缩放

1 篇文章 0 订阅

订阅专栏

最近写五子棋，写着写着，写了几个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 createElement
function 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);
    }
};

LowsynDecdark

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现拖拽与缩放等包含js设置样式与五子棋等

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

扫一扫

专栏目录