一些修改，删除api页面，逐渐完善弹幕留言，主页日志更新
This commit is contained in:
skimrme
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,2 +1,3 @@
|
|||||||
databases/*
|
databases/*
|
||||||
src/*
|
src/*
|
||||||
|
public/message/static/src/video/*
|
||||||
|
|||||||
@@ -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_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_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://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>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -26,6 +27,10 @@
|
|||||||
<font size="3.2">
|
<font size="3.2">
|
||||||
<table border="0">
|
<table border="0">
|
||||||
<tbody>
|
<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>
|
<tr>
|
||||||
<td id="td_logs">2025.07.20</td>
|
<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>
|
<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>
|
<a id="back_url" href="https://ww3.tw/"><b>..返回主页</b></a>
|
||||||
</div>
|
</div>
|
||||||
<div id="message_video">
|
<div id="message_video">
|
||||||
<br>
|
<video src="./static/src/video/cirno-up-down.mp4" controls width="640" height="360">
|
||||||
<br>
|
您的浏览器不支持视频播放。
|
||||||
<br>
|
</video>
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<h1>
|
|
||||||
暂无视频
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="message_com">
|
<div id="message_com">
|
||||||
<br>
|
<div id="push_message">
|
||||||
<br>
|
<label for="message">输入内容 : </label>
|
||||||
<br>
|
<input type="text" id="message" placeholder="qwq">
|
||||||
<br>
|
<button onclick="push_message()">发送弹幕</button>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<p>弹幕列表</p>
|
||||||
评论展示区
|
<pre id="get_message"></pre>
|
||||||
<div id="message_com_black">
|
|
||||||
发送区
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
@@ -75,13 +67,12 @@
|
|||||||
|
|
||||||
#message_video
|
#message_video
|
||||||
{
|
{
|
||||||
background-color: blue;
|
background-color: rgba(0, 0, 0, 0);
|
||||||
color: white;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
height: 69%;
|
height: 69%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: absolute;
|
|
||||||
top: 22%;
|
top: 22%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -92,35 +83,19 @@
|
|||||||
|
|
||||||
#message_com
|
#message_com
|
||||||
{
|
{
|
||||||
background-color: white;
|
background-color: rgba(255, 255, 255, 0);
|
||||||
text-align: center;
|
|
||||||
width: 33%;
|
width: 33%;
|
||||||
height: 69%;
|
height: 69%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: absolute;
|
|
||||||
top: 22%;
|
top: 22%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 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{
|
#back_blok{
|
||||||
/* 返回主页 */
|
/* 返回主页 */
|
||||||
@@ -134,7 +109,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
/* 页面边距 上、右、下、左 */
|
/* 页面边距 上、右、下、左 */
|
||||||
margin: 4% 0px 0px 36.8%;
|
margin: -30% 0px 0px 36.8%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#back_url
|
#back_url
|
||||||
@@ -144,9 +119,66 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<!--这里是专属js-->
|
||||||
<script>
|
<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>
|
||||||
|
<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