skimrme/open-ww3-project-ww3-tw
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
skimrme
2025-07-26 07:05:08 +08:00
parent 1b2fa8b518
commit 8388cf5925
10 changed files with 168 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
databases/*
src/*
public/message/static/src/video/*

0
public/api/index.php
View File

5
public/blog/index.html
View File

@@ -16,6 +16,7 @@
<td id="td_navbar_52px"><b><a href="https://gitea.ww3.tw/skimrme/" id="url_">gitea</a></b></td>
<td id="td_navbar_135px"><b><a href="https://ww3.tw/docker-registry/" id="url_">docker-registry</a></b></td>
<td id="td_navbar_40px"><b><a href="https://ww3.tw/api/" id="url_">api</a></b></td>
<td id="td_navbar_40px"><b><a href="https://wiki.ww3.tw/" id="url_">wiki</a></b></td>
</tr>
</tbody>
</table>
@@ -26,6 +27,10 @@
<font size="3.2">
<table border="0">
<tbody>
<tr>
<td id="td_logs">2025.07.26</td>
<td id="td_logs_content">新增<a href="https://wiki.ww3.tw">wiki</a>页面</td>
</tr>
<tr>
<td id="td_logs">2025.07.20</td>
<td id="td_logs_content">新增<a href="https://gitea.ww3.tw/skimrme">gitea</a>、<a href="https://ww3.tw/docker-registry/">docker-registry</a>页面</td>

116
public/message/index.php
View File

@@ -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>

49
public/message/index.php.114514
View File

@@ -1,49 +0,0 @@
<html>
<head>
<meta charset="utf-8" lang="zh-CN">
<link rel="stylesheet" type="text/css" href="./static/css/body_color.css">
</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>
</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;
}
</style>

52
public/message/index.php.back
View File

@@ -1,52 +0,0 @@
<html>
<head>
<meta charset="utf-8" lang="zh-CN">
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./static/css/body.css">
<?php
include './static/html/content_message.html';
//css 部分 引用 html
?>
<!-- 引入css -->
</head>
<body>
<?php
$title = "message";
//定义变量 title
echo "<title>$title</title>";
// 设定网站抬头
echo "<div id='init'>";
echo "<h1>欢迎来到 $title</h1>";
// 欢迎语
echo "感谢您的访问" . " " . "<br>" . "顾名思义" . "$title" . "就是用来记录留言的地方";
// 介绍部分
echo "</div>";
?>
<div>
<?php
include './static/php/google_translate.php';
// 引入 谷歌翻译
?>
<div id="content_message_block">
</div>
<div id="content_message_video">
</div>
</div>
</body>
</html>
<style>
#init
{
position: fixed;
/* 页面边距 上、右、下、左 */
margin: 70px 0px 0px 0px;
}
</style>

0
public/api/docs/index.php → public/message/static/css/message.css
View File

33
public/message/static/css/video.css Executable file
View File

@@ -0,0 +1,33 @@
/*简易的视频布局*/
/* 视频播放器容器样式 */
.video-container {
position: relative;
width: 640px;
}
/* 自定义进度条容器样式 */
.custom-progress-bar {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
height: 10px;
background: #444;
cursor: pointer;
}
/* 自定义进度条填充样式 */
.custom-progress-bar .fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: #f00;
transition: width .2s; /* 平滑过渡效果 */
}
/* 隐藏默认的浏览器进度条 */
video::-webkit-media-controls-timeline {
display: none;
}

54
public/message/static/js/video.js Executable file
View File

@@ -0,0 +1,54 @@
/* 简易视频播放器 */
var video = document.getElementById("Video");
var progressBar = document.getElementById("customProgressBar");
var fill = document.querySelector(".custom-progress-bar .fill");
// 监听mousedown事件开始拖动
progressBar.addEventListener("mousedown", function (e) {
// 防止默认行为
e.preventDefault();
// 开始拖动
document.addEventListener("mousemove", onDrag);
document.addEventListener("mouseup", onDragEnd);
// 获取初始点击位置
var startX = e.pageX - progressBar.offsetLeft;
});
function onDrag(e) {
// 计算新的进度位置
var newPercent = (e.pageX - progressBar.offsetLeft) / progressBar.offsetWidth;
newPercent = Math.min(Math.max(0, newPercent), 1); // 限制在0到1之间
// 更新视频播放位置
video.currentTime = video.duration * newPercent;
// 更新进度条宽度
fill.style.width = newPercent * 100 + "%";
}
function onDragEnd() {
// 停止拖动
document.removeEventListener("mousemove", onDrag);
document.removeEventListener("mouseup", onDragEnd);
}
// 视频加载元数据后初始化进度条
video.addEventListener("loadedmetadata", function () {
// 设置初始进度
updateProgressBar();
});
// 更新进度条
function updateProgressBar() {
var percent = (video.currentTime / video.duration) * 100;
fill.style.width = percent + "%";
}
// 监听视频播放过程中的时间更新
video.addEventListener("timeupdate", updateProgressBar);
//调节控制音量初始化
var Video = document.getElementById("Video");
Video.volume = 0.5; // 设置默认音量为50%

1
public/message/static/txt/message.txt
View File

@@ -0,0 +1 @@
这是测试