祝福各位掘友们2024新年快乐！身体健康！万事如意！涨工资！
一个简单的弹幕效果网页
作为一个精通（没什么经验）的JAVA后端仔，搞这种有展示效果的代码，我苦思冥想……java不是有个AWT写界面来着，貌似当年大学写作业用过，但是现在全给忘了……然后去瞄了几眼，拉倒吧
还是突击一下前端搞个简单的html来的实在
所以接下来就开始专研搞个什么样的程序好玩好看又祝福的，一开始是想整个烟花+星空+祝福+对联的，效果图被路过的同事狠狠吐槽了
我：我的建议是你帮我也写一个（doge）
然后我就放弃了，因为确实……丑
好了！该干正事了！
本文将介绍如何创建一个具有弹幕效果的简单网页。我们将使用HTML、CSS和JavaScript来实现这个效果。以下是详细的步骤和代码示例。
1. 创建HTML结构
首先，我们需要创建一个基本的HTML结构来承载我们的弹幕效果。在<body>标签内，我们添加了一个用于显示弹幕的<div>容器（ID为"container"），以及一个包含输入框和发送按钮的弹幕输入区域（类名为"box1"）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新春祝福弹幕</title>
<style>...这里放省略的css样式</style>
</head>
<body>
<div id="container"></div>
<div class="box1">
<input type="text" id="danmu-input" placeholder="请输入弹幕" class="barrage-input">
<button id="danmu-send" class="barrage-but">发送</button>
</div>
<script>...这里放省略的js</script>
</body>
</html>
2. 设计CSS样式
接下来，我们通过CSS来设置弹幕的样式和动画效果。这里使用了绝对定位和CSS动画。我们还设置了背景图、字体样式和其他一些美化页面的元素。
- 弹幕样式 (
bullet) ：设置弹幕的基本样式，包括绝对定位、字体大小、颜色、文字阴影、不换行和溢出隐藏。 - 手动输入弹幕样式 (
danmu) ：设置手动输入的弹幕样式，包括绝对定位、字体大小、颜色、文字阴影、正常换行以及移动动画效果。 - 弹幕输入框及按钮样式 (
box1,.barrage-input,.barrage-but) ：设置弹幕输入框及按钮的样式，包括定位、内边距、字体大小、边框圆角、去掉边框、阴影、背景颜色和字体颜色。 - 页面背景样式 (
body) ：设置页面背景样式，包括全局边距为0、隐藏页面滚动条、背景图片、适应屏幕大小、居中显示、字体设置和不透明度。
<style>
/* 自动-设置弹幕的样式 */
.bullet {
position: absolute;
font-size: 50px;
color: forestgreen;
text-shadow: 1px 1px 1px black;
white-space: nowrap;
overflow: hidden;
}
/*输入框弹幕样式*/
.danmu {
position: absolute; /* 定位弹幕 */
font-size: 50px; /* 设置字体大小 */
white-space: normal; /* 防止换行 */
color: white; /* 设置字体颜色 */
text-shadow: 1px 1px 1px black; /* 添加文字阴影 */
animation: move 10s linear forwards; /* 设置动画 移动 10秒 线性向前 向前 */
}
@keyframes move {
from {
transform: translateX(640px);
}
to {
transform: translateX(-200%);
}
}
.box1 {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%); /* 居中显示 */
display: flex; /*排成一行，并根据需要换行。*/
justify-content: center; /*在主轴上居中对齐。*/
margin-top: 40px; /*元素之间留出40像素的空间 */
align-items: flex-end; /* 在交叉轴上底部对齐，即垂直居底 */
}
/*
弹幕输入框
*/
.box1 .barrage-input {
padding: 10px; /*内边距*/
font-size: 16px; /*字体大小*/
border-radius: 5px; /* 边框圆角*/
border: none; /* 去掉边框*/
box-shadow: 1px 1px 2px gray; /* 添加阴影*/
}
/*
弹幕提交按钮
*/
.box1 .barrage-but {
padding: 10px; /* 内边距*/
font-size: 16px; /* 字体大小*/
border-radius: 5px; /* 边框圆角*/
border: none; /* 去掉边框*/
box-shadow: 1px 1px 2px gray; /* 添加阴影*/
background-color: #4CAF50; /* 背景颜色*/
color: white; /* 字体颜色*/
}
body {
margin: 0;
overflow: hidden; /* 防止页面滚动出现滚动条 */
background-image: url('https://thumbnail1.baidupcs.com/thumbnail/e4f465abas1ac1fddc174bc1e9efba39?fid=3443193278-250528-718048846820634&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-jwMoBwJNJD2gixL5w3wQE3FgpCU%3d&expires=8h&chkbd=0&chkv=0&dp-logid=8892478807588515114&dp-callid=0&time=1707098400&size=c1600_u900&quality=90&vuk=3443193278&ft=image&autopolicy=1'); /* 替换为你的背景图路径 */
background-size: cover; /* 适应屏幕大小 */
background-position: 10px 100px; /* 居中显示背景图 */
font-family: Arial, sans-serif; /* 设置字体 */
opacity: 100%;
}
</style>
3. 编写JavaScript逻辑
通过 JavaScript，我们实现了一个定时器，用于动态生成和展示弹幕。同时，我们还支持用户手动输入弹幕的功能，通过点击发送按钮将弹幕添加到展示区域。
- 弹幕数据 (
data) ：定义了一组弹幕数据，每个弹幕有文本和颜色信息。 - 弹幕容器 (
container) ：通过document.getElementById获取弹幕容器，即拥有id="container"的元素。 - 弹幕生成逻辑：通过定时器 (
setInterval)，每隔一定时间生成一个弹幕元素，随机选择弹幕位置，并通过动画效果让弹幕水平滚动。 - 手动输入弹幕：通过获取输入框和发送按钮的元素，监听发送按钮的点击事件，将手动输入的弹幕添加到弹幕容器。
<script>
// 获取弹幕容器
var container = document.getElementById('container');
// 定义弹幕数据
var data = [
{text: "新年快乐！", color: 'white'},
{text: "万事如意！", color: 'white'},
{text: "财源滚滚！", color: 'white'},
{text: "身体健康！", color: 'white'},
{text: "心想事成！", color: 'white'},
{text: "笑口常开！", color: 'white'},
{text: "幸福满满！", color: 'white'},
{text: "好运连连！", color: 'white'},
{text: "步步高升！", color: 'white'},
{text: "事业有成！", color: 'white'},
{text: "家庭和睦！", color: 'white'},
{text: "爱情甜蜜！", color: 'white'},
{text: "学业有成！", color: 'white'},
{text: "青春永驻！", color: 'white'},
{text: "龙马精神！", color: 'white'},
{text: "合家欢乐！", color: 'white'},
{text: "五福临门！", color: 'white'},
{text: "财源广进！", color: 'white'},
{text: "喜气洋洋！", color: 'white'},
{text: "笑逐颜开！", color: 'white'}
];
// 定义弹幕速度
var speed = 2;
// 定义弹幕间隔
var interval = 1000;
// 定义弹幕位置
var topArr = [];
for (var i = 0; i < 10; i++) {
topArr.push(i * 30);
}
// 定义弹幕索引
var index = 0;
// 定义弹幕定时器
var timer = setInterval(function () {
// 获取弹幕数据
var bullet = data[index];
// 创建弹幕元素
var span = document.createElement('span');
span.className = 'bullet';
span.innerText = bullet.text;
span.style.color = bullet.color;
// 随机获取弹幕位置
var top = topArr[Math.floor(Math.random() * topArr.length)];
span.style.top = top + 'px';
// 将弹幕元素添加到容器中
container.appendChild(span);
// 计算弹幕宽度
var width = span.offsetWidth;
// 定义弹幕起始位置
var left = container.offsetWidth;
span.style.left = left + 'px';
// 定义弹幕移动定时器
var bulletTimer = setInterval(function () {
// 计算弹幕当前位置
left -= speed;
span.style.left = left + 'px';
// 判断弹幕是否移出容器
if (left < -width) {
// 移除弹幕元素
container.removeChild(span);
// 清除弹幕移动定时器
clearInterval(bulletTimer);
}
}, 10);
// 更新弹幕索引
index++;
if (index >= data.length) {
index = 0;
}
}, interval);
// 以下是手动输入弹幕的操作
// 获取弹幕容器、输入框和发送按钮
const danmuContainer = document.getElementById('container');
const danmuInput = document.getElementById('danmu-input');
const danmuSend = document.getElementById('danmu-send');
// 给发送按钮添加点击事件监听器
danmuSend.addEventListener('click', () => {
// 创建一个新的div元素
const danmu = document.createElement('div');
// 添加danmu类
danmu.classList.add('danmu');
// 设置弹幕文本为输入框中的值
danmu.innerText = danmuInput.value;
// 将弹幕添加到弹幕容器中
danmuContainer.appendChild(danmu);
// 清空输入框
danmuInput.value = '';
});
</script>
总结
通过上述步骤，我们已经成功创建了一个简单的弹幕效果网页。用户可以在输入框中输入弹幕，点击发送按钮即可将弹幕显示在屏幕上。此外，我们还设置了自动播放弹幕的功能，使得页面更加生动有趣。希望这个教程能帮助你了解如何使用HTML、CSS和JavaScript创建弹幕效果网页。
创建这一个完整的小程序像是创造一个人物，HTML=基本骨架，CSS=外貌神态，JS=动作，CSS对我来说是最难调的，怪不得每次玩游戏捏脸捏着捏着就不耐烦。
