HTML Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Number Pattern 59 - Try It (Browser)</title>
</head>
<body>
  <h1>Border Number Square (aligned cells)</h1>
  <p>Edit n and click Run.</p>
  <script>
    var n = 5;
    var top = 1;
    var right = n + 1;
    var bottom = n * 2 + 3;
    var left = n * 3 + 1;
    for (var i = 1; i <= n; i++) {
      for (var j = 1; j <= n; j++) {
        var v = null;
        if (i === 1) v = top++;
        else if (j === n) v = right++;
        else if (i === n) v = bottom--;
        else if (j === 1) v = left--;
        if (v === null)
          document.write('<span style="display:inline-block;width:3em">&nbsp;</span>');
        else
          document.write('<span style="display:inline-block;width:3em;text-align:right">' + v + '</span>');
      }
      document.write("<br>");
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript Number Pattern 59 (Try It — Browser)