一些修改，删除api页面，逐渐完善弹幕留言，主页日志更新

public/message/index.php

@@ -28,28 +28,20 @@
                         <a id="back_url" href="https://ww3.tw/"><b>..返回主页</b></a>
                     </div>
                     <div id="message_video">
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <h1>
-                            暂无视频
-                        </h1>
+                        <video src="./static/src/video/cirno-up-down.mp4" controls width="640" height="360">
+                            您的浏览器不支持视频播放。
+                        </video>
                     </div>
                     <div id="message_com">
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        <br>
-                        评论展示区
-                        <div id="message_com_black">
-                            发送区
+                        <div id="push_message">
+                            <label for="message">输入内容 : </label>
+                            <input type="text" id="message" placeholder="qwq">
+                            <button onclick="push_message()">发送弹幕</button>
+                            <br>
+                            <p>弹幕列表</p> 
+                            <pre id="get_message"></pre>
                         </div>
-                    </div>
+                    <div> 
                 </div>
             </div>
         </body>
@@ -75,13 +67,12 @@
 
 #message_video
 {
-    background-color: blue;
+    background-color: rgba(0, 0, 0, 0);
     color: white;
     text-align: center;
     width: 60%;
     height: 69%;
     margin: auto;
-    position: absolute;
     top: 22%;
     left: 0;
     right: 0;
@@ -92,35 +83,19 @@
 
 #message_com
 {
-    background-color: white;
-    text-align: center;
+    background-color: rgba(255, 255, 255, 0);
+
     width: 33%;
     height: 69%;
     margin: auto;
-    position: absolute;
     top: 22%;
     left: 0;
     right: 0;
     bottom: 0;
     /*  页面边距 上、右、下、左 */
-    margin: 1.89% 0px 0px 63.8%;
+    margin: -38.4% 0px 0px 63.8%;
 }
 
-#message_com_black
-{
-    background-color: black;
-    color: white;
-    width: 100%;
-    height: 8%;
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /*  页面边距 上、右、下、左 */
-    margin: 108% 0px 0px 0%;
-}
 
 #back_blok{
     /* 返回主页 */
@@ -134,7 +109,7 @@
     right: 0;
     bottom: 0;
     /*  页面边距 上、右、下、左 */
-    margin: 4% 0px 0px 36.8%;
+    margin: -30% 0px 0px 36.8%;
 }
 
 #back_url
@@ -144,9 +119,66 @@
 }
 </style>
 
+<!--这里是专属js-->
 <script>
-//这里是专属js
+function push_message() {
+    const messageInput = document.getElementById('message'); // 获取输入框元素本身
+    const messageContent = messageInput.value.trim(); // 获取输入框的值
+
+    if (messageContent === "") {
+        alert("弹幕内容不能为空！");
+        return;
+    }
+        
+        messageInput.value = ''; 
+        // *** 在这里清空输入框 ***
+
+        messageInput.focus();
+        // 如果你想让输入框在清空后立即获得焦点，方便用户继续输入
+    }
 
 
+</script>
+<script>
+// 这是你的 API 地址，请确保它是正确的
+const API_URL = 'https://api.ww3.tw/danmu/index.php'; 
+// 使用 DOMContentLoaded 事件，确保页面 HTML 结构加载完成后再执行 JavaScript
+        document.addEventListener('DOMContentLoaded', async () => {
+            // 获取用于显示内容的 <pre> 元素
+            const getMessageElement = document.getElementById('get_message');
+            
+            try {
+                // 发送 GET 请求到 API
+                const response = await fetch(API_URL);
 
+                // 检查 HTTP 响应状态码。如果不是 2xx（成功），说明有错误
+                if (!response.ok) {
+                    // 尝试解析 API 返回的错误信息
+                    let errorDetails;
+                    try {
+                        // 假设 API 错误信息也是 JSON 格式
+                        errorDetails = await response.json();
+                    } catch (e) {
+                        // 如果不是 JSON，就作为纯文本处理
+                        errorDetails = await response.text();
+                    }
+                    // 抛出带有详细信息的错误
+                    throw new Error(`HTTP 错误! 状态码: ${response.status} - ${typeof errorDetails === 'object' && errorDetails !== null ? (errorDetails.message || JSON.stringify(errorDetails)) : errorDetails}`);
+                }
+
+                // 你的 PHP API 返回的是 message.txt 的纯文本内容，所以这里使用 .text() 方法解析响应体
+                const content = await response.text();
+                
+                // **** 核心修改：将获取到的内容直接赋值给 <pre> 元素的 textContent ****
+                getMessageElement.textContent = content;
+                getMessageElement.classList.remove('loading'); // 移除加载提示样式
+
+            } catch (error) {
+                // 如果在请求或处理过程中发生任何错误，捕获并显示
+                console.error('获取弹幕内容失败:', error);
+                getMessageElement.textContent = `错误: ${error.message}`;
+                getMessageElement.classList.remove('loading'); // 移除加载提示样式
+                getMessageElement.classList.add('error'); // 添加错误样式
+            }
+        });
 </script>