SOURCE

function getData(){
    const value = document.getElementById('value').value;
    if(!value){
      return alert('请输入num')
    }
    test(value);
  }
  function test(num){
    let list = [];
    for(var i=1;i<=num*num;i++){
      list.push(i)
    }
    //当前长度，剩余数组，结果合集，前期圈数，最大长度
    test1(num,list,[],0,num);
  };
  // 当前num,当前下标
  function test1(num,list,rs,index,max){
    if(num<=1){
      if(num==1){
        rs.push({
          value:list[0],
          index:max*index+index,
        })
      }
      rs = rs.sort((a,b)=>a.index-b.index);
      formatHtml(rs,max);
      return
    }
    var j=1;
    var k=1;
    var m=1;
    for(var i=1;i<=num*num-(num-2)*(num-2);i++){
      if(i<=num){
        rs.push({
          value:list[i-1],
          index:(i-1+index)*max+index,
        })
      }else if(i<=2*num-1){
        rs.push({
          value:list[i-1],
          index:(max-1-index)*max+j+index,
        })
        j++;
      }else if(i<=3*num-2){
        rs.push({
          value:list[i-1],
          index:(max-k-index)*max-1-index,
        })
        k++;
      }else{
        rs.push({
          value:list[i-1],
          index:(index+1)*max-index-m-1,
        })
        m++;
      }
    }
    let arr = list.splice(num*num-(num-2)*(num-2));
    test1(num-2,arr,rs,index+1,max);
  }
  function formatHtml(list,max){
    let html = ''
    for(var i=0;i<list.length;i++){
      html +=`<div class="bd">${list[i].value}</div>`;
      if(i%max==max-1){
        html +='<br/>';
      }
    }
    document.getElementById('table').innerHTML = html;
  }

 <input id="value" placeholder="请输入num"/>
  <button onclick="getData()" >生成表格</button>
  <div id="table"></div>

.bd{
      border:1px solid #dedede;
      margin:1;
      width:25px;
      height:25px;
      display:inline-block;
      line-height: 25px;
      text-align: center
    }
    #table{
      margin:10px
    }