diff --git a/webpage/index.html b/webpage/index.html
index 3f54797..2a67fce 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -67,7 +67,15 @@ 暑期即将发布，敬请期待
-
+
+
+
+
+
+
diff --git a/webpage/script/danmaku.js b/webpage/script/danmaku.js
index b7d3765..798b2ca 100644
--- a/webpage/script/danmaku.js
+++ b/webpage/script/danmaku.js
@@ -16,11 +16,13 @@ fetch("./script/danmakuList.json")
window.addEventListener("load", () => {
const danmakuContainer = document.querySelector('.danmaku-container');
+ const danmakuForm = document.getElementById('danmaku-form');
+ const danmakuInput = document.getElementById('danmaku-input');
- function createDanmaku () {
+ function createDanmaku(text) {
const danmaku = document.createElement("div");
danmaku.className = "danmaku";
- danmaku.textContent = danmakuTexts[Math.floor(Math.random() * danmakuTexts.length)];
+ danmaku.textContent = text || danmakuTexts[Math.floor(Math.random() * danmakuTexts.length)];
// 随机设置弹幕的垂直位置
const top = Math.random() * (window.innerHeight - 30);
@@ -42,6 +44,67 @@ window.addEventListener("load", () => {
});
}
+ // 处理弹幕表单提交
+ if (danmakuForm) {
+ danmakuForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ const danmakuText = danmakuInput.value.trim();
+ if (danmakuText) {
+ // 创建并显示新弹幕
+ createDanmaku(danmakuText);
+
+ // 存储新弹幕
+ storeDanmaku(danmakuText);
+
+ // 清空输入框
+ danmakuInput.value = '';
+ }
+ });
+ }
+
+ // 存储弹幕到服务器/本地
+ function storeDanmaku(text) {
+ // 将新弹幕添加到本地数组
+ danmakuTexts.push(text);
+
+ // 创建要发送的数据
+ const data = {
+ danmaku: text
+ };
+
+ // 使用 localStorage 临时存储发送过的弹幕
+ const storedDanmaku = JSON.parse(localStorage.getItem('userDanmaku') || '[]');
+ storedDanmaku.push(text);
+ localStorage.setItem('userDanmaku', JSON.stringify(storedDanmaku));
+
+ // 尝试发送到服务器存储
+ // 注意：这里使用 fetch API 发送数据到服务器
+ // 如果没有后端服务，这个请求会失败，但不会影响用户体验
+ fetch('./script/saveDanmaku.php', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data)
+ }).catch(error => {
+ console.log('保存弹幕到服务器失败，已存储在本地:', error);
+ });
+ }
+
+ // 加载本地存储的弹幕
+ function loadLocalDanmaku() {
+ const storedDanmaku = JSON.parse(localStorage.getItem('userDanmaku') || '[]');
+ storedDanmaku.forEach(text => {
+ if (!danmakuTexts.includes(text)) {
+ danmakuTexts.push(text);
+ }
+ });
+ }
+
+ // 加载本地存储的弹幕
+ loadLocalDanmaku();
+
// 每隔1-3秒随机发送一条弹幕
setInterval(() => {
createDanmaku();
@@ -51,4 +114,4 @@ window.addEventListener("load", () => {
for (let i = 0; i < 5; i++) {
setTimeout(createDanmaku, i * 500);
}
-});
\ No newline at end of file
+});
diff --git a/webpage/stylesheet/animation.css b/webpage/stylesheet/animation.css
index 7ca3208..7ea8ccb 100644
--- a/webpage/stylesheet/animation.css
+++ b/webpage/stylesheet/animation.css
@@ -45,4 +45,79 @@
to {
transform: translateX(-100%);
}
-}
\ No newline at end of file
+}
+
+/* 弹幕发送表单样式 */
+.danmaku-form-container {
+ position: fixed;
+ bottom: 40px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ z-index: 10;
+ padding: 0 20px;
+}
+
+.danmaku-form {
+ display: flex;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 20px;
+ padding: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ backdrop-filter: blur(5px);
+ width: 100%;
+ max-width: 500px;
+}
+
+#danmaku-input {
+ flex: 1;
+ background: rgba(255, 255, 255, 0.1);
+ border: none;
+ border-radius: 15px;
+ padding: 8px 15px;
+ color: #fff;
+ font-size: 16px;
+ outline: none;
+ margin-right: 8px;
+}
+
+#danmaku-input::placeholder {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+#danmaku-submit {
+ background: linear-gradient(45deg, #4ecdc4, #556270);
+ border: none;
+ border-radius: 15px;
+ color: white;
+ padding: 8px 15px;
+ cursor: pointer;
+ font-size: 16px;
+ transition: all 0.3s ease;
+}
+
+#danmaku-submit:hover {
+ transform: scale(1.05);
+ box-shadow: 0 0 8px rgba(78, 205, 196, 0.6);
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+ .danmaku-form-container {
+ bottom: 20px;
+ }
+
+ .danmaku-form {
+ padding: 6px;
+ }
+
+ #danmaku-input {
+ font-size: 14px;
+ }
+
+ #danmaku-submit {
+ font-size: 14px;
+ padding: 6px 12px;
+ }
+}