지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 웹 프론트엔드 JS 튜토리얼 JavaScript 작성 Lianliankan 미니 게임_javascript 기술

JavaScript 작성 Lianliankan 미니 게임_javascript 기술

May 16, 2016 pm 03:51 PM
javascript

다른 사람들이 Lianliankan을 매일 플레이하는 것을 보는데, 그들은 진지하게 플레이하지 않았다고 합니다. 똑같은 그림 두 개를 연결하면 어떨까요?

Javascript를 사용하여 작성하고 github에 호스팅했습니다. 온라인 DEMO 주소 보기: 열기

최종 렌더링:

연련관을 쓰기 전에 고려해야 할 사항은 무엇인가요?

1: 두 요소가 연결될 수 있는지 어떻게 판단하나요? 저도 처음에 헷갈렸어요. 여기를 참고하세요.

2: 템플릿 엔진을 선택하는 방법은 구문이 간단하기 때문에 최종 라이브러리의 템플릿을 사용했습니다. 원래는 핸들바를 사용하고 싶었으나 용량이 좀 크고, 결론적으로 라이브러리에서도 공통적인 도구와 방법을 많이 제공하고 있습니다. ( •̀ Ω •́ )y

3: 레이아웃을 배치하는 방법은 무엇입니까? 테두리 안에 div가 있습니다. div는 실제로 Lianliankan의 체스 조각입니다. 저는 캔버스에 직접 글을 씁니다.

4: 두 요소가 연결되면 어떻게 연결 효과를 얻을 수 있나요? DOM을 사용하여 구현하는 경우 요소가 연결되면 그림을 연결 경로에 배치해야 합니다. . 아니면 캔버스를 사용하여 연결 효과를 직접 그립니다.

저는 저사양 브라우저를 고려하지 않아서 zeptoJS 라이브러리를 사용했고, 습관적으로 부트스트랩도 참고했습니다.

Data, View, Score 등 세 가지 주요 생성자가 사용됩니다.

View의 구조는 다음과 같으며, 이벤트 바인딩, 인터페이스 생성, 두 개의 동일한 요소가 사라질 때 그리기 효과 등 상대적으로 적은 것들이 있습니다.

보기

/**
 * @desc 根据数据生成map
 * */
 renderHTML : function

/**
* @desc 界面的主要事件绑定
* @return this;
* */
 bindEvents : function


/**
* @desc 工具方法，在canvas上面进行绘图;
* @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组， 会自动重绘;
* */
showSparkLine : function

　　tbody内部元素的模板是这样的:

<script type="text/template" id="tr-td-tpl">
  <% for(var i=0; i<data.length; i++) {%>
    <tr>
      <% for(var j=0; j< data[i].length; j++ ) { %>
        <td id="<%=i%><%=j%>" class="bg<%=data[i][j]%>" data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
          <div>
            <%=getImg(data[i][j])%>
          </div>
        </td>
      <% } %>
    </tr>
  <% } %>
</script>
로그인 후 복사

위 코드의 getImg 메서드는 전역 창의 getImg 메서드를 호출하며 이 메서드는 데이터를 기반으로 그림 문자열을 생성하며 보조 함수입니다. 

  window.getImg = function( num ) {
    switch(num){
      case 1:
        return "<img src='imgs/ani (1).gif' />";
      case 2:
        return "<img src='imgs/ani (2).gif' />";
      case 3:
        return "<img src='imgs/ani (3).gif' />";
      case 4:
        return "<img src='imgs/ani (4).gif' />";
      case 5:
        return "<img src='imgs/ani (5).gif' />";
      case 6:
        return "<img src='imgs/ani (6).gif' />";
    }
  };
로그인 후 복사

Lianliankan의 데이터는 2차원 배열이므로 템플릿에 두 개의 for 루프를 사용해야 합니다. 루프는 데이터와 템플릿을 결합하면 아래 그림과 같은 DOM 구조가 생성됩니다. >

Score 모듈 생성자 함수 Score, 그게 다 점수와 관련된 코드입니다(요소를 전달하고, 생성된 인스턴스의 addScore 메소드를 직접 호출하면 DOM이 자동으로 렌더링됩니다). 점수는 분리를 위한 것입니다: 

     Score = function(el) {
       this.el = $(el);
       this.score = 0;
     };

  $.extend( Score.prototype , {
    /**
     * @desc 改变元素的HTML，递增分数;
     * @param
     * */
    addScore : function() {
      this.el.html(++this.score);
    }
  });
로그인 후 복사
Constructor Data의 주요 구조는 다음과 같습니다. 상대적으로 메소드 수가 적지만 Data의 코드는 실제로 300줄을 차지합니다.... 요소의 연결 가능 여부를 확인하려면 canConnect 메소드를 사용하고, canConnect 메소드를 사용합니다. dirConnect 메소드를 호출합니다. 꽤 복잡합니다. 더 알고 싶다면 직접 작성하는 것이 가장 좋습니다. 

//新建初始化
newData : function

//工具方法，随机混肴数组;
suffer : function

 /**
* @desc set值，把地图中对应的数据清空或者设置，两用接口
 * @param x, y
* @return chain
* */
set : function

/**
 * @desc 判断两个元素之间是否可以连接
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || []
* */
canConnect : function

/**
* @desc 判断元素是否可以直连
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || true
* */
dirConnect
로그인 후 복사
참고로 모든 코드는 다음과 같습니다. 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <title>link</title>
  <script src="js/zepto.js"></script>
  <script src="js/underscore1.8.js"></script>
  <style>
    table{
      border-collapse: collapse;
    }
    td{
      border:1px solid #f5f5f5;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    td.active{
      opacity: 0.7;
    }
    td div{
      width:40px;
      height:40px;
    }
    .bg1{
      /*background: #2ECC71;*/
    }
    .bg2{
      /*background: #E67E22;*/
    }
    .bg3{
      /*background: #34495E;*/
    }
    .bg4{
      /*background: #1ABC9C;*/
    }
    .relative{
      position: relative;
    }
    .absolute{
      position: absolute;
      left:0;
      top:0;
    }
  </style>
</head>
<body>

<div class="container ">
  <div class="row" style="width:80%;margin:0 auto;">
    <h3>得分<span class="label label-default" id="score">0</span></h3>
  </div>
</div>

<div class="container">
  <div class="row relative">
    <table class="absolute">
      <thead></thead>
      <tbody id="tbody">
      </tbody>
    </table>
    <canvas id="canvas">
      <p>Your browserdoes not support the canvas element.</p>
    </canvas>
  </div>
</div>
<script type="text/template" id="tr-td-tpl">
  <% for(var i=0; i<data.length; i++) {%>
    <tr>
      <% for(var j=0; j< data[i].length; j++ ) { %>
        <td id="<%=i%><%=j%>" class="bg<%=data[i][j]%>" data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info='{"x":<%=[j]%>,"y":<%=[i]%>}'>
          <div>
            <%=getImg(data[i][j])%>
          </div>
        </td>
      <% } %>
    </tr>
  <% } %>
</script>
<script>
  var el = document.getElementById("tbody");
  var elCan = document.getElementById("canvas");
  var tpl = document.getElementById("tr-td-tpl");

  var cfg = {
    width : 8,
    height : 8
  };
  window.getImg = function( num ) {
    switch(num){
      case 1:
        return "&lt;img src='imgs/ani (1).gif' /&gt;";
      case 2:
        return "&lt;img src='imgs/ani (2).gif' /&gt;";
      case 3:
        return "&lt;img src='imgs/ani (3).gif' /&gt;";
      case 4:
        return "&lt;img src='imgs/ani (4).gif' /&gt;";
      case 5:
        return "&lt;img src='imgs/ani (5).gif' /&gt;";
      case 6:
        return "&lt;img src='imgs/ani (6).gif' /&gt;";
    }
  };

  var View = function(data, score) {
      this.data = data;
      this.score = score;
     },
     Data = function(cfg) {
      this.cfg = {
        width : cfg.width+2,
        height : cfg.height+2
      };
       this.getRandom = this.getRandom();
     },
     Score = function(el) {
       this.el = $(el);
       this.score = 0;
     };

  $.extend( Data.prototype, {
    /**
     * @desc 把两个
     * @param HTMLELEMENT
     * @return true || false
     * */
    clear : function(obj, target) {
    },
    /**
     * @desc 根据this.cfg新建数据到this.map
     * @param void
     * @return void
     * */
    newData : function() {
      var result = [];
      for(var i=0; i<=this.cfg.height+1; i++ ) {
        result[i] = result[i] || [];
        for(var j = 0; j<= this.cfg.width+1; j++) {

          if(i === 0 || j===0 || (i===this.cfg.height+1) || j === (this.cfg.width+1) ) {
            result[i][j] = 0;
          }else{
            //1-4
            result[i][j] = this.getRandom();
          }
        };
      };
      this.map = result;
      return this;
    },
    //随机混肴数组;
    suffer : function(obj) {
      function random(min, max) {
        if (max == null) {
          max = min;
          min = 0;
        }
        return min + Math.floor(Math.random() * (max - min + 1));
      };
      var set = obj;
      var length = set.length;
      var shuffled = Array(length);
      for (var index = 0, rand; index < length; index++) {
        rand = random(0, index);
        if (rand !== index) shuffled[index] = shuffled[rand];
        shuffled[rand] = set[index];
      }
      return shuffled;
    },
    /**
     * @return 返回值必须是成双的， 消除到最后尼玛，发现有一堆不匹配的，玩个球;
     * */
    getRandom : function() {
      //如果消消乐是3*3， 那么你告诉我....最后一个和谁消, 所以要做的就是把所有的元素生成变成一半，然后返回;
      var arr = new Array( (this.cfg.height) * (this.cfg.width) / 2 );
      var result = [];
      for(var i=0; i<arr.length; i++ ) {
        arr[i] = (Math.floor( Math.random()*6 ) + 1);
      };
      result = Array.prototype.concat.call( [] , arr, arr);
      result = this.suffer( result );
      return function( ) {
        return result.pop();
      };
    },
    /**
     * @desc set值
     * @param x, y
     * @return chain
     * */
    set : function( x, y) {
      this.map[y][x] = 0;
      return this;
    },
    /**
     * @desc 判断元素是否可以连接
     * @param [{x:1,y:1},{x:1,y:1}]
     * @return false || true
     * */
    canConnect : function(obj,target) {
      var map = this.map;
      //循环obj的y轴相等 ， obj.x旁边所有数据为0的元素;;
      var getX = function( obj ) {
        var result = [];
        //循环找出在X附近为0的元素;
        for(var i=obj.x+1; i< map[0].length; i++) {
          if( map[obj.y][i] == 0 ) {
            result.push( {x:i, y:obj.y} );
          }else{
            break;
          };
        };
        for(var i=obj.x-1; i>=0; i--) {
          if( map[obj.y][i] == 0 ) {
            result.push( {x:i,y:obj.y} );
          }else{
            break;
          };
        };
        return result;
      };
      //循环obj的x轴相等， obj.y旁边所有数据为0的元素;
      var getY = function(obj) {
        var result = [];
        for(var i=obj.y+1; i<map.length; i++) {
          if( map[i][obj.x] == 0) {
            result.push( { x : obj.x ,y : i} );
          }else{
            break;
          };
        };
        for(var i=obj.y-1; i>=0; i--) {
          if( map[i][obj.x] == 0 ) {
            result.push( { x : obj.x ,y : i} );
          }else{
            break;
          };
        };
        return result;
      };
      var arr0 = Array.prototype.concat.call( [], getX(obj), obj, getY(obj)).filter(function(obj) {
        return !!obj;
      });
      var arr1 = Array.prototype.concat.call( [], getX(target), target, getY(target) ).filter(function(obj) {
        return !!obj;
      });
      for(i = 0; i<arr0.length; i++) {
        for(var j = 0; j<arr1.length; j++) {
          //只要有一个连接就返回true;
          if( this.dirConnect(arr0[i],arr1[j]) ) {
            return [obj, arr0[i], arr1[j], target];
          };
        };
      };
      return false;
    },
    /**
     * @desc 判断元素是否可以直接连接
     * @param [{x:1,y:1},{x:1,y:1}]
     * @return false || true
     * */
    dirConnect : function(obj, target) {
      var map = this.map;
      //row是x轴 列
      //col是y轴 行
      var min = 0, max = 0, sum = 0;
      if(obj.y === target.y) {
        if(obj.x < target.x) {
          min = obj.x;
          max = target.x;
        }else{
          min = target.x;
          max = obj.x;
        };
        for(var i=min; i<=max; i++) {
          sum += map[obj.y][i];
        };
        if(sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
          return true;
        }else{
          return false;
        };
      };
      if(obj.x === target.x) {
        if(obj.y < target.y) {
          min = obj.y;
          max = target.y;
        }else{
          min = target.x;
          max = obj.y;
        };
        for( i=min; i<=max; i++) {
          sum += map[i][obj.x];
        };
        if( sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
          return true;
        }else{
          return false;
        };
      };
    }
  });
  $.extend( View.prototype, {
    /**
     * @desc 为view添加视图的主元素
     * @return void
     * */
    setEL : function(el) {
      this.el = el;
      return this;
    },
    setTpl : function(tpl) {
      this.tpl = _.template( tpl.innerHTML );
      return this;
    },
    /**
     * @desc 根据数据生成map
     * */
    renderHTML : function() {
      $(this.el).html( this.tpl( {data : this.data.map} ) );
      return this;
    },
    /**
     * @desc 界面的主要事件绑定
     * @return this;
     * */
    bindEvents : function() {
      $(this.el).delegate("td", "click", this.click.bind(this));
      return this;
    },
    /**
     * @desc click事件， 单独抽出来的;
     * */
    click : function(ev) {
      //修改样式;
      $("td.active").removeClass("active");
      var target = $(ev.target).closest("td");
      target.addClass("active");

      //第一次点击我们做的特殊处理;
      var prev = this.prev;
      if( !prev || target[0] === prev[0]){
        this.prev = target;
        return;
      };
      
      if( prev.attr("data-data") === target.attr("data-data")) {
        var xy = JSON.parse( prev.attr("data-info") );
        var xxyy = JSON.parse( target.attr("data-info") );
        //保存了连接的数组信息
        var connectionInfo = [] || false;
        if( connectionInfo = this.data.canConnect( xy, xxyy) ) {
          this.showSparkLine( connectionInfo );
          this.prev = undefined;
          this.data.set(xy.x, xy.y);
          this.data.set(xxyy.x, xxyy.y);
          this.score.addScore();
          var _this = this;
          setTimeout(function() {
            _this.renderHTML();
          },2000);
        };
        prev.attr("data-data", "");
        target.attr("data-data","")
      }else{
        this.prev = target;
      };
    },
    /**
     * @desc 工具方法，在canvas上面进行绘图;
     * @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组， 会自动重绘;
    * */
    showSparkLine : function( arr ) {
      arr = arr.map(function(xy) {
        return {
          x : (xy.x)*40 + 20,
          y : (xy.y)*40 + 20
        }
      });
      var elCan = document.getElementById("canvas");
      function spark(ctx) {
        function showAndClear(arr, lineWidth) {
          ctx.clearRect(0,0,elCan.width,elCan.height);
          ctx.beginPath();
          ctx.lineJoin = "round";
          ctx.lineWidth = lineWidth;
          ctx.shadowColor = "rgba(241, 196, 15, 0.41)";
          ctx.shadowOffsetX = 1;
          ctx.shadowOffsetY = 1;
          ctx.shadowBlur = 1;
          for(var i=0; i<arr.length-1; i++) {
            var xy = arr[i];
            var nextXY = arr[i+1]
            ctx.moveTo(xy.x, xy.y);
            ctx.lineTo(nextXY.x, nextXY.y);
          };
          ctx.stroke();
        };
        var ctx = elCan.getContext("2d");
        ctx.strokeStyle = "#F1C40F";
        var lineWidthArr = [1,2,1,2,1,3,1,0];
        var len = lineWidthArr.length;
        var times = 400, addTimes = 200;
        while(len--) {
          (function(len){
            setTimeout(function() {
              showAndClear(arr, lineWidthArr[len]);
              if(len==0) {
                ctx.clearRect(0,0,elCan.width,elCan.height);
              }
            }, times);
            times += addTimes;
          })(len)
        };
      };
      spark( elCan );
    }
  });
  $.extend( Score.prototype , {
    /**
     * @desc 改变元素的HTML，递增分数;
     * @param
     * */
    addScore : function() {
      this.el.html(++this.score);
    }
  });

  $(function() {
    var score = new Score( document.getElementById("score") );
    var data = new Data(cfg).newData();
    var view = new View(data, score);
    view.setEL( el ).setTpl( tpl).renderHTML().bindEvents();
    (function init() {
      //如果通过style属性添加width或者height，会根据原来的宽和高度自动伸缩的
      elCan.width = el.offsetWidth;
      elCan.height = el.offsetHeight;
    })();
  });

</script>
</body>
</html>
로그인 후 복사
온라인 DEMO 주소 보기:

열기

다른 사람이 작성한 Lianliankan을 발견했는데 코드가 거의 없습니다. 

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt; 连连看 &lt;/title&gt;
  &lt;meta name="Generator" content="EditPlus"&gt;
  &lt;meta name="Author" content=""&gt;
  &lt;meta name="Keywords" content=""&gt;
  &lt;meta name="Description" content=""&gt;
  &lt;style type="text/css"&gt;
    #board{width:508px; height:500px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #999999;}
    #board span{display: block; position: absolute; width: 30px; height: 30px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="board" &gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;!--       js        --&gt;
&lt;script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script  type="text/javascript" &gt;

  $(function(){
    var cont=$("#board");
    var colors=["#ff0000","#00ff00","#0000ff","#ffcc33","#000000","#00ffcc","#ffffff"];
    var pos=[];
    var click=0;
    var firstSpan;
    var fx;
    var fy;
    var arr=[];

    arr=[0,0,0,0,0,0,0,0];
    pos.push(arr);

    for(var i=0;i&lt;8;i++){
      new creSpan(i,cont,0,i*40,colors[6],0);
    }

    for(var i=1;i&lt;=6;i++){
      m=new creSpan(i,cont,i*40,0,"#ffffff");
      arr=[0];

      for(var j=0;j&lt;6;j++){
        var color=Math.floor(Math.random()*6);
        new creSpan(i,cont,i*40,(j+1)*40,colors[color],(color+1));
        arr.push(1);
      }
      m=new creSpan(i,cont,i*40,(j+1)*40,"#ffffff",0);
      arr.push(0);
      pos.push(arr);

    }
    for(var i=0;i&lt;8;i++){
      m=new creSpan(i,cont,7*40,i*40,"#ffffff",0);
    }
    arr=[0,0,0,0,0,0,0,0];
    pos.push(arr);

    function clear(c1,c2,x,y){
      if(c1!=null)c1.style.background="#ffffff";
      if(c2!=null){
        c2.style.background="#ffffff";
        pos[x-1][y-1]=0;
        pos[fx-1][fy-1]=0;
      }
      fx=0;
      fy=0;
      click=0;
    }

    $.each($("#board span"),function(index,mSpan){
      $(this).click(function(){
        var x=Math.floor(index/8);
        var y=Math.floor(index%8);
        if(click==0){
          click=1;
          firstSpan=mSpan;
          fx=x;
          fy=y;
          return;
        }

        if(firstSpan.id!=mSpan.id||(x==fx&&fy==y)){
          clear(null,null,0,0);
          return;
        }
        var col=6;
        var row=6;

        for(var i=0;i&lt;row+2;i++){
          var step=i-x&gt;0&#63;1:-1;
          var count=0;
          for(var j=x;j!=i;j+=step){
            count+=pos[j][y];
          }
          step=y&gt;fy&#63;-1:1;
          for(j=y;j!=fy;j+=step){
            count+=pos[i][j];
          }
          step=i&gt;fx&#63;-1:1;
          for(j=i;j!=fx;j+=step){
            count+=pos[j][fy];
          }
          if(count==1){
            clear(firstSpan,mSpan,x,y);
            return;
          }
        }
        for(i=0;i&lt;col+2;i++){
          step=i-y&gt;0&#63;1:-1;
          count=0;
          for(j=y;j!=i;j+=step){
            count+=pos[x][j];
          }
          step=x&gt;fx&#63;-1:1;
          for(j=x;j!=fx;j+=step){
            count+=pos[i][j];
          }
          step=i&lt;fy&#63;1:-1;
          for(j=i;j!=fy;j+=step){
            count+=pos[fx][j];
          }
          if(count==1){
            clear(firstSpan,mSpan,x,y);
            return;
          }
        }
        clear(null,null,0,0);

      });
    });
  });

  function creSpan(n,cont,mtop,mleft,mcolor,idstr){
    var mSpan=document.createElement("span");
    cont[0].appendChild(mSpan);
    mSpan.id=idstr;
    with(mSpan.style){
      top=mtop+"px";
      left=mleft+"px";
      background=mcolor;
    }
  };

&lt;/script&gt;
&lt;/html&gt;
로그인 후 복사
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사

Repo : 팀원을 부활시키는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전 By DDD
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
3 몇 주 전 By 王林
더보기

핫툴 태그

코드앤아이
오디오
사업
마케팅
AI감지기
챗봇
디자인&아트

인기 기사

Repo : 팀원을 부활시키는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전 By DDD
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
3 몇 주 전 By 王林
더보기

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7288
9
자바 튜토리얼
1622
14
Cakephp 튜토리얼
1342
46
라라벨 튜토리얼
1259
25
PHP 튜토리얼
1206
29
더보기
Related knowledge
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법

자바스크립트에서 insertBefore를 사용하는 방법 자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

자바스크립트에서 insertBefore를 사용하는 방법

See all articles