cola-previous-tutorials/tutorial.html at main · githubCola/cola-previous-tutorials · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html>
  <head>
    <title>可乐的往期教程</title>
  </head>
  <body>
    <div
      id="link"
      style="display: flex; justify-content: center; align-items: center"
    >
      <span id="linkIntro"></span>
      <a id="linkClick" target="_blank"></a>
    </div>
    <div
      id="image-container"
      style="display: flex; justify-content: center; align-items: center"
    ></div>
    <script>
      function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return "";
        return decodeURIComponent(results[2].replace(/\+/g, " "));
      }

      var imageId = getParameterByName("id");
      if (imageId) {
        let imageIdNum = Number(imageId);
        if (
          isNaN(imageIdNum) ||
          imageIdNum < 1 ||
          imageIdNum > 14 ||
          imageIdNum % 1 !== 0
        ) {
          document.getElementById("image-container").innerHTML = "无效的图片ID";
        } else {
          let link = {
            1: "425845",
            2: "426581",
            3: "427311",
            4: "429264",
            5: "429894",
            6: "429912",
            7: "431375",
            8: "433489",
            9: "435388",
            10: "460361",
            11: "463459",
            12: "464311",
            13: "474504",
            14: "491076",
          };
          document.getElementById("linkIntro").innerHTML =
            "本期教程的编程猫社区帖子：";
          document.getElementById("linkClick").href =
            "https://shequ.codemao.cn/community/" + link[imageId];
          document.getElementById("linkClick").innerHTML =
            "https://shequ.codemao.cn/community/" + link[imageId];
          var imagePath = "./images/" + imageId + ".png";
          var imgElement = document.createElement("img");
          imgElement.src = imagePath;
          document.getElementById("image-container").appendChild(imgElement);
        }
      } else {
        document.getElementById("image-container").innerHTML = "无效的图片ID";
      }
    </script>
    <style>
      img {
        width: 100%;
        height: auto;
      }

      @media (min-width: 768px) {
        img {
          width: 60%;
          height: auto;
        }
      }
    </style>
  </body>
</html>