一些修改，删除api页面，逐渐完善弹幕留言，主页日志更新
This commit is contained in:
skimrme
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
33
public/message/static/css/video.css
Executable file
33
public/message/static/css/video.css
Executable 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
54
public/message/static/js/video.js
Executable 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%
|
||||
@@ -0,0 +1 @@
|
||||
这是测试
|
||||
Reference in New Issue
Block a user