首頁 > 後端開發 > php教程 > 一段JS代码,请大家分析下其中的“时间”“步数”变量是那些?如何传递给PHP变量

一段JS代码,请大家分析下其中的“时间”“步数”变量是那些?如何传递给PHP变量

WBOY
發布: 2016-06-13 10:06:56
原創
997 人瀏覽過

一段JS代码,请大家分析下其中的“时间”“步数”变量是那些?怎么传递给PHP变量!
这是一个从网上找的“拼图”代码。感觉还不错,就把他嵌入了我的PHP主页里面,当一个小应用

当然,我希望当游戏成功完成时,能把“时间”“步数”2个变量传递出来,然后输出给用户

但是这段JS代码还真看不懂

所以来请教大家,其中的“时间”“步数”变量是那些?怎么再传递给PHP变量!

HTML code
<!--Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JS重现_经典拼板游戏</title><style>*{margin:0;padding:0;}.shell{margin:20px auto;position:relative;width:499px;height:299px;border:#666 10px solid;background:#FAFAFA;}.shell p{position:absolute;width:99px;height:99px;background:url(meitu.jpg) no-repeat 0 0;cursor:pointer;}.bar{margin:0 auto;width:499px;font:600 16px/1.8em Verdana;}.bar em{font-style:normal;margin-right:10px;color:#F00;}#showall{font:12px/1.8em Verdana;cursor:pointer;}#show{background:url(meitu.jpg) no-repeat 0 0;}</style><div id="shell" class="shell"></div><div id="bar" class="bar">    <b>计时:</b><em id="times">00:00</em>    <b>步数:</b><em id="steps">0</em>    <select id="hard">        <option value="1">入门模式</option>        <option value="7">简单模式</option>        <option value="81">一般模式</option>        <option value="201">困难模式</option>        <option value="501">超难模式</option>    </select>    <b id="showall">查看原图</b>
</div><div id="show" class="shell" style="display:none;"></div><script type="text/javascript">speller={    init:function(n){        this.hard=n||5;        this.step=this.useTime=0;        this.blank=14;        this.createGrid();        clearInterval(this.timer);        this.timer=setInterval(function(){            speller.useTime++;/* 累加时间并格式化显示 */            document.getElementById("times").innerHTML=('0'+parseInt(speller.useTime/60)).slice(-2)+':'+('0'+speller.useTime%60).slice(-2);        },1000);    }    ,createGrid:function(){        var X=function(n){return n%5*100;},Y=function(n){return parseInt(n/5)*100;};        for(var i=0,html=[];i<15;i++){            html.push('<p onclick="speller.move(this);" id="'+i+'" class="'+i+'"  style="left:'+X(i)+'px;top:'+Y(i)+'px;background-position:-'+X(i)+'px -'+Y(i)+'px;">');        }        document.getElementById("shell").innerHTML=html.join('');        this.random();    }    ,random:function(p){        var ps=document.getElementById("shell").getElementsByTagName("P"),l=ps.length,me=this;        ps[this.blank].style.display="none";        var en=function(n){            var arr=[];            if(n<14 && n%5!=4){arr.push(n+1);}            if(n>0 && n%5!=0){arr.push(n-1);}            if(n>4){arr.push(n-5);}            if(n<10){arr.push(n+5);}            return arr[parseInt(Math.random()*arr.length)]*1;        }        var getp=function(n){for(var i=0;i<l;i++){if(ps[i].className==n){return ps[i];}}}        for(var i=0;i<me.hard;i++){            this.move2(getp(en(this.blank*1)));        }    }    ,move2:function(p){        var pos=p.className*1,POS=this.blank*1,abs=Math.abs(pos-POS),max=pos>POS?pos:POS;        p.style.top=parseInt(POS/5)*100+"px";        p.style.left=POS%5*100+"px";        p.className=POS;this.blank=pos;    }    ,move:function(p){        var pos=p.className*1,POS=this.blank*1,abs=Math.abs(pos-POS),max=pos>POS?pos:POS;        if(abs==5){            this.fx(parseInt(pos/5)*100,parseInt(POS/5)*100,function(x){p.style.top=x+"px";},function(){},100,.4)        }else if(abs==1&&max%5!=0){            this.fx(pos%5*100,POS%5*100,function(x){p.style.left=x+"px";},function(){},100,.4)        }else{return;}        p.className=POS;this.blank=pos;document.getElementById("steps").innerHTML=++this.step;        if(this.check()){            var me=this,last=document.getElementById("shell").getElementsByTagName("P")[14];            last.style.display="block";            this.blank=10000;            this.fx(0,100,function(x){last.style.opacity=x/100;last.style.filter="alpha(opacity="+x+")";},function(){alert('你真棒!再来一次吧!');me.init();},200,1)        }    }    ,check:function(){        var p=document.getElementById("shell").getElementsByTagName("P");        for(var i=0,l=p.length;i<l;i++){if(p[i].className!=p[i].id){return false;}}        return true;    }    ,fx:function(f,t,fn,end,tm,pow){        var D=Date,d=new D,e,c=tm||240,pow=pow||2;        return e=setInterval(function (){            var z=Math.min(1,(new D-d)/c);            (false===fn(+f+(t-f)*Math.pow(z,pow),z)||z==1) && end && end(clearTimeout(e));        },10);    }}speller.init(document.getElementById("hard").value);document.getElementById("showall").onclick=function(){    document.getElementById("show").style.display=document.getElementById("show").style.display=="none"?"":"none";}document.getElementById("hard").onchange=function(){    speller.init(this.value);}document.all&&document.execCommand("BackgroundImageCache", false, true);</script><div class="clear">
                 
              
              
        
            </div>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板