加入发送弹幕功能

webpage/index.html

@@ -67,7 +67,15 @@ <h1 class="title">暑期即将发布，敬请期待</h1>
 </div>
 
 <div class="danmaku-container"></div>
-
+
+<!-- 添加弹幕发送表单 -->
+<div class="danmaku-form-container">
+  <form id="danmaku-form" class="danmaku-form">
+    <input type="text" id="danmaku-input" placeholder="发送一条弹幕..." maxlength="50">
+    <button type="submit" id="danmaku-submit">发送</button>
+  </form>
+</div>
+
 <div class="footer-beian">
 	<p> © RTL Team All rights reserved | <a href="https://beian.miit.gov.cn/" target="_blank"> <i>闽ICP备 - 号</i> </a> </p>
 </div>

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);
 	}
-});
+});

webpage/stylesheet/animation.css

@@ -45,4 +45,79 @@
 	to {
 		transform: translateX(-100%);
 	}
-}
+}
+
+/* 弹幕发送表单样式 */
+.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;
+  }
+}