173 lines
5.8 KiB
PHP
Executable File
173 lines
5.8 KiB
PHP
Executable File
<html>
|
||
<head>
|
||
<meta charset="utf-8" lang="zh-CN">
|
||
<meta name="viewport" content="width=1366px, initial-scale=1.0"> <!-- 页面等比例缩小 -->
|
||
<link rel="stylesheet" type="text/css" href="./static/css/navbar/body_color.css">
|
||
<link rel="icon" type="img/icon" href="./static/icon/original.ico">
|
||
</head>
|
||
|
||
<body>
|
||
<?php
|
||
$title = "Message | 留言";
|
||
// title 变量
|
||
|
||
echo "<title>" . "$title" . "</title>";
|
||
// 页面标题
|
||
?>
|
||
<body id="body_color">
|
||
<div id="message_block">
|
||
<div id="content_page">
|
||
<?php
|
||
echo "<h1>欢迎来到 $title</h1>";
|
||
// 欢迎语
|
||
|
||
echo "感谢您的访问" . " " . "<br>" . "顾名思义" . "$title" . "就是用来记录留言的地方";
|
||
// 介绍部分
|
||
?>
|
||
<div id="back_blok">
|
||
<!-- 返回主页 -->
|
||
<a id="back_url" href="https://ww3.tw/"><b>..返回主页</b></a>
|
||
</div>
|
||
<div id="message_video">
|
||
<video src="./static/src/video/cirno-up-down.mp4" controls width="640" height="360">
|
||
您的浏览器不支持视频播放。
|
||
</video>
|
||
</div>
|
||
<div id="message_com">
|
||
<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>
|
||
</body>
|
||
</body>
|
||
</html>
|
||
|
||
<!-- php 引入 -->
|
||
<?php
|
||
include "./static/css/navbar/index-css.html";
|
||
// 引入navbar-css
|
||
?>
|
||
<!-- php 引入 -->
|
||
|
||
<style>
|
||
/* 这里是专属css */
|
||
#content_page
|
||
{
|
||
color: rgb(255, 74, 74);
|
||
text-align: left;
|
||
font-size: 18px;
|
||
}
|
||
|
||
#message_video
|
||
{
|
||
background-color: rgba(0, 0, 0, 0);
|
||
color: white;
|
||
text-align: center;
|
||
width: 700px;
|
||
height: 410px;
|
||
/* 页面边距 上、右、下、左 */
|
||
margin: 1.89% 0px 0px 0%;
|
||
}
|
||
|
||
#message_com
|
||
{
|
||
background-color: rgba(0, 0, 0, 0);
|
||
width: 360px;
|
||
height: 410px;
|
||
/* 页面边距 上、右、下、左 */
|
||
margin: -405px 0px 0px 63.8%;
|
||
}
|
||
|
||
|
||
#back_blok{
|
||
/* 返回主页 */
|
||
color: rgb(0, 0, 0);
|
||
width: 20%;
|
||
height: 4%;
|
||
margin: auto;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
/* 页面边距 上、右、下、左 */
|
||
margin: 4% 0px 0px 36.8%;
|
||
}
|
||
|
||
#back_url
|
||
{
|
||
color: black;
|
||
text-decoration: none;
|
||
}
|
||
</style>
|
||
|
||
<!--这里是专属js-->
|
||
<script>
|
||
function push_message() {
|
||
const messageInput = document.getElementById('message'); // 获取输入框元素本身
|
||
const messageContent = messageInput.value.trim(); // 获取输入框的值
|
||
|
||
if (messageContent === "") {
|
||
alert("弹幕内容不能为空！");
|
||
return;
|
||
}
|
||
|
||
messageInput.value = '';
|
||
// *** 在这里清空输入框 ***
|
||
|
||
messageInput.focus();
|
||
// 如果你想让输入框在清空后立即获得焦点，方便用户继续输入
|
||
}
|
||
|
||
|
||
</script>
|
||
<script>
|
||
const API_URL = 'https://api.ww3.tw/public/danmu/get.php'; //连接api的地址
|
||
|
||
// 使用 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>
|