<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>手机弹幕聊天（居中版）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
background-color: #1a1a1a;
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
/* 弹幕容器：占满屏幕主要区域，新增居中对齐 */
.danmu-container {
position: relative;
width: 100%;
height: calc(100vh - 120px);
overflow: hidden;
background-color: #0f0f0f;
border-bottom: 1px solid #333;
/* 关键：让弹幕在容器内垂直居中 */
display: flex;
align-items: center;
}
/* 单个弹幕样式：修改为居中显示 + 水平滚动 */
.danmu-item {
position: absolute;
white-space: nowrap;
font-size: 16px;
padding: 8px 12px;
border-radius: 20px;
background-color: rgba(0,0,0,0.6);
/* 关键：初始位置在容器右侧外部，水平居中 */
left: 100%;
transform: translateY(-50%);
animation: danmuMove linear forwards;
z-index: 1;
}
/* 弹幕用户名高亮 */
.danmu-name {
font-weight: 600;
margin-right: 6px;
}
/* 弹幕滚动动画：从右到左穿过屏幕 */
@keyframes danmuMove {
to {
left: -100%;
}
}
/* 控制区：昵称+输入+发送 */
.control-area {
padding: 16px;
background-color: #1a1a1a;
}
.nickname-box {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.nickname-label {
font-size: 14px;
color: #ccc;
}
#nickname-input {
flex: 1;
padding: 10px 14px;
border: 1px solid #333;
border-radius: 20px;
background-color: #2d2d2d;
color: #fff;
font-size: 15px;
outline: none;
}
#nickname-input:focus {
border-color: #4a90e2;
}
/* 弹幕输入+发送区域 */
.input-send-box {
display: flex;
gap: 10px;
}
#danmu-input {
flex: 1;
padding: 12px 16px;
border: 1px solid #333;
border-radius: 24px;
background-color: #2d2d2d;
color: #fff;
font-size: 16px;
resize: none;
min-height: 48px;
max-height: 120px;
outline: none;
}
#danmu-input:focus {
border-color: #4a90e2;
}
#send-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #4a90e2;
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
#send-btn:hover {
background-color: #357abd;
}
/* 颜色选择器 */
.color-selector {
margin-top: 10px;
display: flex;
gap: 8px;
padding-left: 4px;
}
.color-option {
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
}
.color-option.active {
border-color: #fff;
box-shadow: 0 0 0 1px #4a90e2;
}
.color-white { background-color: #fff; }
.color-blue { background-color: #4a90e2; }
.color-pink { background-color: #e91e63; }
.color-yellow { background-color: #ffeb3b; }
.color-green { background-color: #4caf50; }
</style>
</head>
<body>
<!-- 弹幕显示容器 -->
<div class="danmu-container" id="danmu-container"></div>
<!-- 控制区域：昵称、输入、发送、颜色选择 -->
<div class="control-area">
<div class="nickname-box">
<span class="nickname-label">昵称：</span>
<input type="text" id="nickname-input" placeholder="请输入你的昵称" value="游客">
</div>
<div class="input-send-box">
<textarea id="danmu-input" placeholder="输入弹幕内容..."></textarea>
<button id="send-btn">➤</button>
</div>
<div class="color-selector">
<div class="color-option color-white active" data-color="#fff"></div>
<div class="color-option color-blue" data-color="#4a90e2"></div>
<div class="color-option color-pink" data-color="#e91e63"></div>
<div class="color-option color-yellow" data-color="#ffeb3b"></div>
<div class="color-option color-green" data-color="#4caf50"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 1. 获取DOM元素
const danmuContainer = document.getElementById('danmu-container');
const nicknameInput = document.getElementById('nickname-input');
const danmuInput = document.getElementById('danmu-input');
const sendBtn = document.getElementById('send-btn');
const colorOptions = document.querySelectorAll('.color-option');
// 2. 初始化变量
let selectedColor = '#fff'; // 默认弹幕颜色
const containerHeight = danmuContainer.offsetHeight; // 弹幕容器高度
const defaultNickname = '游客'; // 默认昵称
// 3. 颜色选择功能
colorOptions.forEach(option => {
option.addEventListener('click', function() {
colorOptions.forEach(opt => opt.classList.remove('active'));
this.classList.add('active');
selectedColor = this.dataset.color;
});
});
// 4. 发送弹幕功能
sendBtn.addEventListener('click', sendDanmu);
danmuInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendDanmu();
}
});
// 5. 自动生成示例弹幕
const demoDanmus = [
{name: '小明', content: '居中弹幕看起来更整齐！'},
{name: '小红', content: '手机上看居中弹幕好舒服～'},
{name: '小李', content: '大家一起来发弹幕吧！'},
{name: '小张', content: '这个颜色好好看！'},
{name: '小王', content: '太有意思啦～'}
];
setInterval(() => {
const randomDanmu = demoDanmus[Math.floor(Math.random() * demoDanmus.length)];
createDanmuElement(randomDanmu.name, randomDanmu.content,
['#fff', '#4a90e2', '#e91e63', '#ffeb3b', '#4caf50'][Math.floor(Math.random() * 5)]);
}, 3000);
// ---------------------- 核心函数定义 ----------------------
function sendDanmu() {
const nickname = nicknameInput.value.trim() || defaultNickname;
const content = danmuInput.value.trim();
if (!content) {
alert('请输入弹幕内容～');
danmuInput.focus();
return;
}
createDanmuElement(nickname, content, selectedColor);
danmuInput.value = '';
danmuInput.focus();
}
// 关键：弹幕居中定位（垂直居中，水平滚动）
function createDanmuElement(name, content, color) {
const danmuItem = document.createElement('div');
danmuItem.className = 'danmu-item';
danmuItem.innerHTML = `<span class="danmu-name" style="color: ${color};">${name}</span>${content}`;
danmuItem.style.color = color;
// 核心：固定垂直居中（容器高度的50% - 自身高度的50%）
danmuItem.style.top = '50%';
// 初始位置在容器右侧外部，保证从屏幕外进入
danmuItem.style.left = '100%';
// 随机设置滚动速度（5-10秒走完屏幕）
const randomDuration = 5 + Math.random() * 5;
danmuItem.style.animationDuration = `${randomDuration}s`;
danmuContainer.appendChild(danmuItem);
// 动画结束后删除元素，优化性能
setTimeout(() => {
danmuItem.remove();
}, randomDuration * 1000);
}
});
</script>
</body>
</html>