cola-previous-tutorials/index.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./mdui/css/mdui.min.css" />
    <script src="./mdui/js/mdui.min.js"></script>
    <noscript>Your browser does not support JavaScript!</noscript>
    <title>可乐的往期教程</title>
  </head>

  <body>
    <center>
      <p>
        为了让大家更快入门JavaScript与神奇代码岛（以下简称“神岛”）代码，可乐给大家推出了一系列JavaScript与神岛代码的萌新教程
      </p>
      <p style="font-weight: bold">
        现在神岛即将停止服务，但大家如果有JavaScript的学习需求的话，可以看前十一期教程噢~前十一期教程都是基础JavaScript的萌新教程~
      </p>
      <p>以后所有的代码萌新教程链接都将会整合在这里，以便大家查询</p>
      <p>后续我也会推出更多的教程，感谢支持！</p>
    </center>
    <center>
      <p style="font-weight: bold">JavaScript篇：</p>
    </center>
    <center>
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="1"
        >
          <span>第一期——数据类型</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="2"
        >
          <span>第二期——变量</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="3"
        >
          <span>第三期——运算符</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="4"
        >
          <span>第四期——for循环</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="5"
        >
          <span>第五期——while & do-while</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="6"
        >
          <span>第六期——if条件判断</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="7"
        >
          <span>第七期——switch条件判断</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="8"
        >
          <span>第八期——函数（一）</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="9"
        >
          <span>第九期——函数（二）</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="10"
        >
          <span>第十期——数组</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="11"
        >
          <span>第十一期——对象</span>
        </button>
      </div>
    </center>
    <center><p style="font-weight: bold">神岛篇：</p></center>
    <center>
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="12"
        >
          <span>第十二期——事件</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="13"
        >
          <span>第十三期——对话框</span>
        </button>
      </div>

      <br />
      <div>
        <button
          class="mdui-btn mdui-btn-block mdui-btn-raised mdui-ripple"
          id="14"
        >
          <span>第十四期——选择器</span>
        </button>
      </div>
    </center>
    <script>
      const buttons = document.querySelectorAll("button");
      buttons.forEach((button) => {
        button.addEventListener("click", () => {
          let id = button.id;
          let newUrl = "tutorial.html?id=" + id;
          window.open(newUrl, "_blank");
        });
      });
    </script>
  </body>
</html>