更新了首页，为下一版本奠基

Faucet7 · Nov 21, 2023 · 1249091 · 1249091
1 parent ecbb422
commit 1249091
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 45 deletions.
diff --git a/func.js → FirstVersionPage/func.js b/func.js → FirstVersionPage/func.js
diff --git a/index.html → FirstVersionPage/index.html b/index.html → FirstVersionPage/index.html
@@ -80,14 +80,14 @@ <h3>在css文件中 所有文字改成一个像素风的字体 字体文件自
     <h4 style="color: green;">[已解决] 完美 字体文件整理的习惯也很好
     </h4>
     <h3>在这条下面插入几张原神的图片 ----牛瑞雨 23.11.14</h3>
-    <img src="./assets/audios/images/image1.jpg" width="200px" alt="不是原神" />
-    <img src="./assets/audios/images/image2.png" width="200px" alt="不是原神" />
-    <img src="./assets/audios/images/image3.jpg" width="200px" alt="原神" />
-    <img src="./assets/audios/images/image4.jpg" width="200px" alt="原神" />
+    <img src="../assets/audios/images/image1.jpg" width="200px" alt="不是原神" />
+    <img src="../assets/audios/images/image2.png" width="200px" alt="不是原神" />
+    <img src="../assets/audios/images/image3.jpg" width="200px" alt="原神" />
+    <img src="../assets/audios/images/image4.jpg" width="200px" alt="原神" />
     <h4 style="color: green;">[已解决] img标签写错了呀 看一下菜鸟教程？ 另外能不能再插入一张本地的图片
     </h4>
     <h3>在这条下面插入一条音频 要求音乐和原神相关 请自行查找 ----薛景妍 23.11.14</h3>
-    <audio src="./assets/audios/nian.mp3" controls></audio>
+    <audio src="../assets/audios/nian.mp3" controls></audio>
     <h4 style="color: green;">[已解决] 完美 媒体文件整理的习惯也很好
     </h4>
 
@@ -100,12 +100,10 @@ <h2 style="color: gray;">Normal</h2>
 
     <script src="randomColor.js"></script>
     <h3>添加几个按钮/开关 并在后面添加随机数字 ----李岳烁 23.11.14</h3>
-    <button onclick="addone()" class="nes-btn is-primary" value="一个按钮" name="button1"
-        style="width: 160px;">+1</button>
+    <button onclick="addone()" class="nes-btn is-primary" value="一个按钮" name="button1" style="width: 160px;">+1</button>
     <input type="textbox" id="num1" value=><br>
 
     <button onclick="setBottonRandomColor()" class="nes-btn is-success" value="另一个按钮" name="button2"
-
         style="width: 160px;">改变颜色</button>
     <input type="textbox" id="num2" value=><br>
     <button class="nes-btn is-error" value="最后一个按钮" name="button3" style="width: 160px;">切换正负</button>
@@ -126,22 +124,22 @@ <h4 style="color: green;">[已解决] 奈斯 相当不错 </h4>
 
     <h3>在js中给按钮添加点击效果 要求点击后 随机数字改变颜色 ----陈嘉颖 & 彭欣玥23.11.15</h3>
     <script>
-        const colorButton=document.getElementById('button2');
-        function changeColor(){
-            const randomColor=getRandomColor();
-            colorButton.style.backgroundColor=randomColor;
+        const colorButton = document.getElementById('button2');
+        function changeColor() {
+            const randomColor = getRandomColor();
+            colorButton.style.backgroundColor = randomColor;
         }
-        colorButton.addEventListener('click',changeColor);
-        funcion getRandomColor(){
-            const letters='0123456789ABCDEF';
-            let color='#';
-            for(let i =0;i<6;i++){
-                color += letters[Math.floor(Math.random()*16)];
+        colorButton.addEventListener('click', changeColor);
+        function getRandomColor() {
+            const letters = '0123456789ABCDEF';
+            let color = '#';
+            for (let i = 0; i < 6; i++) {
+                color += letters[Math.floor(Math.random() * 16)];
             }
             return color;
         }
     </script>
-       <h4 style="color: green;">[已解决] 做的不错 两个人用不同的方式写的 但是前者的代码最好写进js里面？</h4>
+    <h4 style="color: green;">[已解决] 做的不错 两个人用不同的方式写的 但是前者的代码最好写进js里面？</h4>
 
     <h3>在js中给开关添加点击效果 要求点击后 随机数字切换正负 ----xxx 23.11.xx</h3>
     <h3 id="hyperlink">将这个需求变为一个超链接 要求这个链接可以在js中随意配置 默认链接为原神的官网 ----曹雪宸小 & xxx 23.11.15</h3>
@@ -153,7 +151,7 @@ <h4 style="color: red;">[待解决] 链接没问题 但是后面这段写进js
     </h4>
     <mark01>在js中给这段文字添加效果 要求鼠标悬停在文字上面时 文字字号变大 移开后还原 ----丘俊彬 23.11.15</mark01>
     <h4 style="color: green;">[已解决] nice </h4>
-    
+
     <h2 style="color: red;">Hard</h2>
 
     <h3>在js中请求一些有趣的api 并实现相应的效果 api可以自己找 这里推荐几个： https://zhuanlan.zhihu.com/p/616708019 ----hy 23.11.14
@@ -176,20 +174,21 @@ <h3>实现点击图片放大查看 ----I am Genshin's Dog 23.11.16</h3>
         <img id="bigimage" alt="Big Image" onclick="hideModal()">
     </div>
     <div>
-        <img class="thum-img" id="thumImg" onclick="showModal(this)" src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/0ff41bd5ad6eddc4ccf5b6d53adbb6fd52663389.jpg">
+        <img class="thum-img" id="thumImg" onclick="showModal(this)"
+            src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/0ff41bd5ad6eddc4ccf5b6d53adbb6fd52663389.jpg">
     </div>
     <script>
-        function showModal(image){
-            var modal=document.getElementById('modal');
-            var thumImg= document.getElementById('thumImg');
-            modal.style.display='block';
-            bigimage.src=image.src;
-          }
-          
-          function hideModal(){
-            var modal=document.getElementById('modal');
-            modal.style.display='none';
-          }
+        function showModal(image) {
+            var modal = document.getElementById('modal');
+            var thumImg = document.getElementById('thumImg');
+            modal.style.display = 'block';
+            bigimage.src = image.src;
+        }
+
+        function hideModal() {
+            var modal = document.getElementById('modal');
+            modal.style.display = 'none';
+        }
     </script>
     <h4 style="color: green;">[已解决] 好好好 你做的好啊 </h4>
     <h2 style="color: blue;">还有高手？</h2>
@@ -203,4 +202,4 @@ <h3>自己提出需求 自己解决 ----xxx 23.11.xx</h3>
 
 </body>
 
-</html>
+</html>
diff --git a/randomColor.js → FirstVersionPage/randomColor.js b/randomColor.js → FirstVersionPage/randomColor.js
diff --git a/style.css → FirstVersionPage/style.css b/style.css → FirstVersionPage/style.css
@@ -1,11 +1,11 @@
 @font-face {
   font-family: "pixel";
-  src: url("fonts/IPix.ttf");
+  src: url("../fonts/IPix.ttf");
 }
 
 @font-face {
   font-family: "brush-pixel";
-  src: url("fonts/zpix.ttf");
+  src: url("../fonts/zpix.ttf");
 }
 
 .title {
@@ -26,33 +26,37 @@ body {
 }
 
 mark01 {
-font-size: 16px;
-transition: font-size 0.3s;
+  font-size: 16px;
+  transition: font-size 0.3s;
 }
 mark01:hover {
-font-size: 25px; 
+  font-size: 25px;
 }
 
 /* 弹窗 */
-.modal{
+.modal {
   display: none;
   margin: auto;
   position: fixed;
   left: 5%;
   top: 10%;
   width: 90%;
   height: 90%;
-  background-color: rgb(255,255,255,1);
+  background-color: rgb(255, 255, 255, 1);
   z-index: 1;
 }
 
 /* 丑丑的动画*/
 @keyframes zoom {
-  from{transform: scale(0.1)}
-  to {transform: scale(1)}
+  from {
+    transform: scale(0.1);
+  }
+  to {
+    transform: scale(1);
+  }
 }
 /* 弹窗出现后的图片 */
-.modal>img{
+.modal > img {
   display: block;
   width: 100%;
   height: 100%;
@@ -63,11 +67,10 @@ font-size: 25px;
   animation-duration: 0.5s;
 }
 /* 原始图片哈 */
-.thum-img{
+.thum-img {
   width: 30%;
   height: 30%;
   margin: auto;
   display: block;
   padding: 40px;
-
 }
diff --git a/test1.js → FirstVersionPage/test1.js b/test1.js → FirstVersionPage/test1.js
diff --git a/FrontPage/FrontPage.css b/FrontPage/FrontPage.css
@@ -0,0 +1,38 @@
+@font-face {
+  font-family: "brush-pixel";
+  src: url("../fonts/zpix.ttf");
+}
+
+body {
+  font-family: "brush-pixel" !important;
+}
+
+.title {
+  font-size: 32px !important;
+  transform: translateY(-40%);
+  padding: 0 32px !important;
+  font-weight: bold !important;
+}
+
+.nes-btn:nth-child(2) {
+  color: white !important;
+  font-weight: bold !important;
+  padding: 0 32px;
+}
+
+.board {
+  width: 50%;
+  position: absolute;
+  top: 50vh;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+}
+
+.buttons-group-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-top: 64px;
+}
diff --git a/FrontPage/FrontPage.html b/FrontPage/FrontPage.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="FrontPage.css">
+    <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
+    <script src="FrontPage.js" defer></script>
+</head>
+
+<body>
+    <div class="nes-container is-rounded with-title is-centered board">
+        <p class="title">腾讯创新俱乐部告示板</p>
+        <p>这是最新的告示板</p>
+        <div class="buttons-group-container">
+            <button onclick="switchPage(-1)" type="button" class="nes-btn is-error">Last</button>
+            <button onclick="goVersionPage()" type="button" id="versionBtn" class="nes-btn is-warning">Version
+                1</button>
+            <button onclick="switchPage(1)" type="button" class="nes-btn is-success">Next</button>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/FrontPage/FrontPage.js b/FrontPage/FrontPage.js
@@ -0,0 +1,40 @@
+var pageList = [
+  {
+    version: 1,
+    url: "../FirstVersionPage/index.html",
+  },
+  {
+    version: 2,
+    url: "",
+  },
+  {
+    version: 3,
+    url: "",
+  },
+];
+
+var nowPage = {};
+
+function created() {
+  nowPage = pageList[0];
+}
+created();
+
+function switchPage(step) {
+  switch (nowPage.version + step) {
+    case 0:
+      break;
+    case pageList.length + 1:
+      break;
+    default:
+      nowPage = pageList[nowPage.version + step - 1];
+      break;
+  }
+  document.getElementById("versionBtn").textContent =
+    "Version " + nowPage.version;
+}
+
+function goVersionPage() {
+  window.location.href = nowPage.url;
+  console.log(window.navigator);
+}