{"id":594,"date":"2017-02-26T22:33:40","date_gmt":"2017-02-26T14:33:40","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=594"},"modified":"2017-02-26T22:33:40","modified_gmt":"2017-02-26T14:33:40","slug":"%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%b8%aa%e7%bd%91%e9%a1%b5%e7%89%88%e4%b9%9d%e5%ae%ab%e6%a0%bc%e6%8b%bc%e5%9b%be%e5%b0%8f%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=594","title":{"rendered":"\u5b9e\u73b0\u4e00\u4e2a\u7f51\u9875\u7248\u4e5d\u5bab\u683c\u62fc\u56fe\u5c0f\u6e38\u620f"},"content":{"rendered":"

\u4e00\u4e2a\u4e5d\u5bab\u683c\u7684\u62fc\u56fe\u5c0f\u6e38\u620f\uff0c\u6839\u636ehtml,css,javascript\u7b80\u5355\u5b8c\u6210\u3002<\/p>\n

1.\u62fc\u56fe.html<\/strong><\/p>\n

<!DOCTYPE html>  \r\n<html>  \r\n<head>  \r\n    <meta charset=\"UTF-8\">  \r\n    <title>\u524d\u7aefABC-\u62fc\u56fe\u6e38\u620f<\/title>  \r\n    <link href=\"\u62fc\u56fe.css\" type=\"text\/css\" rel=\"stylesheet\">  \r\n<\/head>  \r\n<body>  \r\n    <div id=\"Container\">  \r\n        <div id=\"game\">  \r\n            <div id=\"m1\" onclick=\"move(1)\">1<\/div>  \r\n            <div id=\"m2\" onclick=\"move(2)\">2<\/div>  \r\n            <div id=\"m3\" onclick=\"move(3)\">3<\/div>  \r\n            <div id=\"m4\" onclick=\"move(4)\">4<\/div>  \r\n            <div id=\"m5\" onclick=\"move(5)\">5<\/div>  \r\n            <div id=\"m6\" onclick=\"move(6)\">6<\/div>  \r\n            <div id=\"m7\" onclick=\"move(7)\">7<\/div>  \r\n            <div id=\"m8\" onclick=\"move(8)\">8<\/div>  \r\n        <\/div>  \r\n        <div id=\"Control\">  \r\n            <p id=\"timeArea\">  \r\n                <span id=\"timeText\">\u603b\u7528\u65f6<\/span>  \r\n                <span id=\"time\"><\/span>  \r\n            <\/p>  \r\n            <p id=\"button\">  \r\n                <span id=\"start\" onclick=\"start()\">\u5f00\u59cb<\/span>  \r\n                <span id=\"reStart\" onclick=\"reset()\">\u91cd\u7f6e<\/span>  \r\n            <\/p>  \r\n        <\/div>  \r\n    <\/div>  \r\n<script src=\"\u62fc\u56fe.js\" type=\"text\/javascript\"><\/script>  \r\n<\/body>  \r\n<\/html><\/pre>\n
2.\u62fc\u56fe.css<\/p>\n
*{  \r\n    padding: 0;  \r\n    margin: 0;  \r\n    border: 0;  \r\n}  \r\nbody{  \r\n    width: 100%;  \r\n    height: 100%;  \r\n}  \r\n#Container{  \r\n    position: relative;  \r\n    width: 620px;  \r\n    height: 420px;  \r\n    margin: 0 auto;  \r\n    margin-top: 100px;  \r\n    border-radius: 1px;  \r\n}  \r\n#game{  \r\n    position: absolute;  \r\n    width: 450px;  \r\n    height: 450px;  \r\n    border-radius: 5px;  \r\n    display: inline-block;  \r\n    background-color: #ffe171;  \r\n   box-shadow: 0 0 10px #ffe171;  \r\n}  \r\n#game div{  \r\n    height: 149px;  \r\n    width: 149px;  \r\n    position: absolute;  \r\n    box-shadow: 1px 1px 2px #777;  \r\n    background-color: #0D8BBD;  \r\n    color: white;  \r\n    text-align: center;  \r\n    font-size: 150px;  \r\n    line-height: 150px;  \r\n    cursor: pointer;  \r\n    transition: 0.3s;  \r\n}  \r\n#game div:hover{  \r\n    color: #ffe171;  \r\n}  \r\n#Control{  \r\n    width: 150px;  \r\n    height: 450px;  \r\n    display: inline-block;  \r\n    float: right;  \r\n}  \r\n#Control span{  \r\n    height: 25px;  \r\n    font-size: 20px;  \r\n    color: #222;  \r\n    margin-top: 30px;  \r\n    transition:0.3s;  \r\n}  \r\n#Control span:hover{  \r\n    color: wheat;  \r\n}  \r\n#start{  \r\n    display: inline-block;  \r\n    font-size: 28px;  \r\n    width: 100px;  \r\n    height: 28px;  \r\n    text-align: center;  \r\n    background-color: #00a0df;  \r\n    color: #ffe171;  \r\n    text-shadow: 1px 1px 2px #ffe171;  \r\n    border-radius: 5px;  \r\n    box-shadow: 2px 2px 5px #4c98f5;  \r\n    cursor: pointer;  \r\n}  \r\n#reStart{  \r\n    display: inline-block;  \r\n    font-size: 28px;  \r\n    width: 100px;  \r\n    height: 28px;  \r\n    text-align: center;  \r\n    background-color: #00a0df;  \r\n    color: #ffe171;  \r\n    text-shadow: 1px 1px 2px #ffe171;  \r\n    border-radius: 5px;  \r\n    box-shadow: 2px 2px 5px #4c98f5;  \r\n    cursor: pointer;  \r\n}  \r\n#m1{  \r\n    left: 0;  \r\n    top: 0;  \r\n}  \r\n#m2{  \r\n    left: 150px;  \r\n    top: 0;  \r\n}  \r\n#m3{  \r\n    left: 300px;  \r\n    top: 0;  \r\n}  \r\n#m4{  \r\n    left: 0;  \r\n    top:150px;  \r\n}  \r\n#m5{  \r\n    left: 150px;  \r\n    top: 150px;  \r\n}  \r\n#m6{  \r\n    left: 300px;  \r\n    top: 150px;  \r\n}  \r\n#m7{  \r\n    left: 0px;  \r\n    top: 300px;  \r\n}  \r\n#m8{  \r\n    left: 150px;  \r\n    top: 300px;  \r\n}<\/pre>\n
3.\u62fc\u56fe.js<\/p>\n
\/** \r\n * Created by YHJ1997 on 2017\/2\/26. \r\n *\/  \r\nvar time=0;  \r\nvar pause=false;  \r\nvar set_Timer;  \r\nvar d=new Array(10);\/\/\u4fdd\u5b58\u5927DIV\u5f53\u524d\u88c5\u7684\u5c0fDIV\u7684\u7f16\u53f7  \r\nvar d_direct=new Array(  \r\n    [0],\/\/\u4e3a\u4e86\u903b\u8f91\u66f4\u7b80\u5355\uff0c\u7b2c\u4e00\u4e2a\u5143\u7d20\u6211\u4eec\u4e0d\u7528\uff0c\u6211\u4eec\u4ece\u4e0b\u68071\u5f00\u59cb\u4f7f\u7528  \r\n    [2,4],\/\/\u5927DIV\u7f16\u53f7\u4e3a1\u7684DIV\u53ef\u4ee5\u53bb\u7684\u4f4d\u7f6e\uff0c\u6bd4\u5982\u7b2c\u4e00\u5757\u53ef\u4ee5\u53bb2,4\u53f7\u4f4d\u7f6e  \r\n    [1,3,5],  \r\n    [2,6],  \r\n    [1,5,7],  \r\n    [2,4,6,8],  \r\n    [3,5,9],  \r\n    [4,8],  \r\n    [5,7,9],  \r\n    [6,8]  \r\n);  \r\nvar d_xy=new Array(  \r\n    [0],  \r\n    [0,0],  \r\n    [150,0],  \r\n    [300,0],  \r\n    [0,150],  \r\n    [150,150],  \r\n    [300,150],  \r\n    [0,300],  \r\n    [150,300],  \r\n    [300,300]  \r\n)  \r\nd[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0;  \r\nfunction move(id){  \r\n    var i=1;  \r\n    for(i;i<10;++i){  \r\n        if(d[i]==id){  \r\n            break;  \r\n        }  \r\n    }  \r\n    var target_d=0;  \r\n    target_d=whereCanTo(i);  \r\n    if(target_d!=0){  \r\n        d[i]=0;  \r\n        d[target_d]=id;  \r\n        document.getElementById(\"m\"+id).style.left=d_xy[target_d][0]+\"px\";  \r\n        document.getElementById(\"m\"+id).style.top=d_xy[target_d][1]+\"px\";  \r\n    }  \r\n    var finish_flag=true;  \r\n    for(var k=1; k<9; ++k){  \r\n        if( d[k] != k){  \r\n            finish_flag=false;  \r\n            break;  \r\n            \/\/\u5982\u679c\u5927DIV\u4fdd\u5b58\u7684\u7f16\u53f7\u548c\u5b83\u672c\u8eab\u7684\u7f16\u53f7\u4e0d\u540c\uff0c\u5219\u8868\u793a\u8fd8\u4e0d\u662f\u5168\u90e8\u6309\u7167\u987a\u5e8f\u6392\u7684\uff0c\u90a3\u4e48\u8bbe\u7f6e\u4e3afalse\uff0c\u8df3\u51fa\u5faa\u73af\uff0c\u540e\u9762\u4e0d\u7528\u518d\u5224\u65ad\u4e86\uff0c\u56e0\u4e3a\u53ea\u8981\u4e00\u4e2a\u4e0d\u7b26\uff0c\u5c31\u6ca1\u5b8c\u6210\u6e38\u620f  \r\n        }  \r\n    }  \r\n    if(finish_flag==true){  \r\n        if(!pause)  \r\n            start();  \r\n        alert(\"congratulation\");  \r\n    }  \r\n}  \r\nfunction whereCanTo(cur_div){  \r\n    \/\/\u5224\u65ad\u662f\u5426\u53ef\u79fb\u52a8\u51fd\u6570\uff0c\u53c2\u6570\u662f\u5927DIV\u7684\u7f16\u53f7\uff0c\u4e0d\u662f\u5c0fDIV\u7684\u7f16\u53f7\uff0c\u56e0\u4e3a\u5c0fDIV\u7f16\u53f7\u8ddf\u53ef\u4ee5\u53bb\u54ea\u6ca1\u5173\u7cfb\uff0c\u5c0fDIV\u662f\u4f1a\u52a8\u7684  \r\n    var j=0;  \r\n    var move_flag=false;  \r\n    for(j=0; j<d_direct[cur_div].length; ++j){  \r\n        \/\/\u628a\u6240\u6709\u53ef\u80fd\u53bb\u7684\u4f4d\u7f6e\u5faa\u73af\u904d\u5386\u4e00\u4e0b  \r\n        if( d[ d_direct[cur_div][j] ] == 0 ){  \r\n            move_flag=true;  \r\n            break;  \r\n        }  \r\n        \/\/\u5982\u679c\u76ee\u6807\u7684\u503c\u4e3a0\uff0c\u8bf4\u660e\u76ee\u6807\u4f4d\u7f6e\u6ca1\u6709\u88c5\u5c0fDIV\uff0c\u5219\u53ef\u4ee5\u79fb\u52a8\uff0c\u8df3\u51fa\u5faa\u73af  \r\n    }  \r\n    if(move_flag == true){  \r\n        return d_direct[cur_div][j];  \r\n    }else{  \r\n        return 0;  \r\n    }  \r\n    \/\/\u53ef\u4ee5\u79fb\u52a8\uff0c\u5219\u8fd4\u56de\u76ee\u6807\u4f4d\u7f6e\u7684\u7f16\u53f7\uff0c\u5426\u5219\u8fd4\u56de0\uff0c\u8868\u793a\u4e0d\u53ef\u79fb\u52a8  \r\n}  \r\nfunction timer(){  \r\n    time+=1;\/\/\u4e00\u79d2\u949f\u52a0\u4e00\uff0c\u5355\u4f4d\u662f\u79d2  \r\n    var min=parseInt(time\/60);\/\/\u628a\u79d2\u8f6c\u6362\u4e3a\u5206\u949f\uff0c\u4e00\u5206\u949f60\u79d2\uff0c\u53d6\u5546\u5c31\u662f\u5206\u949f  \r\n    var sec=time%60;\/\/\u53d6\u4f59\u5c31\u662f\u79d2  \r\n    document.getElementById(\"time\").innerHTML=min+\"\u5206\"+sec+\"\u79d2\";\/\/\u7136\u540e\u628a\u65f6\u95f4\u66f4\u65b0\u663e\u793a\u51fa\u6765  \r\n}  \r\n  \r\n\/\/\u5f00\u59cb\u6682\u505c\u51fd\u6570  \r\nfunction start(){  \r\n    if(pause){  \r\n        document.getElementById(\"start\").innerHTML=\"\u6682\u505c\";\/\/\u628a\u6309\u94ae\u6587\u5b57\u8bbe\u7f6e\u4e3a\u6682\u505c  \r\n        pause=false;\/\/\u6682\u505c\u8868\u793a\u8bbe\u7f6e\u4e3afalse  \r\n        set_timer=setInterval(timer,1000);\/\/\u542f\u52a8\u5b9a\u65f6  \r\n        \/\/\u5982\u679c\u5f53\u524d\u662f\u6682\u505c\uff0c\u5219\u5f00\u59cb  \r\n    }else{  \r\n        document.getElementById(\"start\").innerHTML=\"\u5f00\u59cb\";  \r\n        pause=true;  \r\n        clearInterval(set_timer);  \r\n    }  \r\n}  \r\n  \r\n\/\/\u91cd\u7f6e\u51fd\u6570  \r\nfunction reset(){  \r\n    time=0;\/\/\u628a\u65f6\u95f4\u8bbe\u7f6e\u4e3a0  \r\n    random_d();\/\/\u628a\u65b9\u5757\u968f\u673a\u6253\u4e71\u51fd\u6570  \r\n    if(pause)\/\/\u5982\u679c\u6682\u505c\uff0c\u5219\u5f00\u59cb\u8ba1\u65f6  \r\n        start();  \r\n}  \r\n  \r\n\/\/\u968f\u673a\u6253\u4e71\u65b9\u5757\u51fd\u6570\uff0c\u6211\u4eec\u7684\u601d\u8def\u662f\u4ece\u7b2c\u4e5d\u5757\u5f00\u59cb\uff0c\u968f\u673a\u751f\u6210\u4e00\u4e2a\u6570\uff0c\u7136\u540e\u4ed6\u4eec\u4e24\u5757\u5bf9\u8c03\u4e00\u4e0b  \r\nfunction random_d(){  \r\n    for(var i=9; i>1; --i){  \r\n        var to=parseInt(Math.random()*(i-1)+1);\/\/\u4ea7\u751f\u968f\u673a\u6570\uff0c\u8303\u56f4\u4e3a1\u5230i\uff0c\u4e0d\u80fd\u8d85\u51fa\u8303\u56f4\uff0c\u56e0\u4e3a\u6ca1\u8fd9\u4e2aid\u7684DIV  \r\n        if(d[i]!=0){  \r\n            document.getElementById(\"m\"+d[i]).style.left=d_xy[to][0]+\"px\";  \r\n            document.getElementById(\"m\"+d[i]).style.top=d_xy[to][1]+\"px\";  \r\n        }  \r\n        \/\/\u628a\u5f53\u524d\u7684DIV\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a\u968f\u673a\u4ea7\u751f\u7684DIV\u7684\u4f4d\u7f6e  \r\n        if(d[to]!=0){  \r\n            document.getElementById(\"m\"+d[to]).style.left=d_xy[i][0]+\"px\";  \r\n            document.getElementById(\"m\"+d[to]).style.top=d_xy[i][1]+\"px\";  \r\n        }  \r\n        \/\/\u628a\u968f\u673a\u4ea7\u751f\u7684DIV\u7684\u4f4d\u7f6e\u8bbe\u7f6e\u4e3a\u5f53\u524d\u7684DIV\u7684\u4f4d\u7f6e  \r\n        var tem=d[to];  \r\n        d[to]=d[i];  \r\n        d[i]=tem;  \r\n        \/\/\u7136\u540e\u628a\u5b83\u4eec\u4e24\u4e2a\u7684DIV\u4fdd\u5b58\u7684\u7f16\u53f7\u5bf9\u8c03\u4e00\u4e0b  \r\n    }  \r\n}  \r\n  \r\n\/\/\u521d\u59cb\u5316\u51fd\u6570\uff0c\u9875\u9762\u52a0\u8f7d\u7684\u65f6\u5019\u8c03\u7528\u91cd\u7f6e\u51fd\u6570\uff0c\u91cd\u65b0\u5f00\u59cb  \r\nwindow.onload=function(){  \r\n    reset();  \r\n}<\/pre>\n
 <\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u5b9e\u73b0\u4e00\u4e2a\u7f51\u9875\u7248\u4e5d\u5bab\u683c\u62fc\u56fe\u5c0f\u6e38\u620f<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u4e00\u4e2a\u4e5d\u5bab\u683c\u7684\u62fc\u56fe\u5c0f\u6e38\u620f\uff0c\u6839\u636ehtml,css,javascript\u7b80\u5355\u5b8c\u6210\u3002 1.\u62fc\u56fe.html <!DOCTYPE html> <html> <head> &lt […]<\/p>\n","protected":false},"author":1,"featured_media":319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[28,83,9,157],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/594"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=594"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/594\/revisions"}],"predecessor-version":[{"id":595,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/594\/revisions\/595"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/319"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=594"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}