2024春节的祝福弹幕

祝福各位掘友们2024新年快乐!身体健康!万事如意!涨工资!

一个简单的弹幕效果网页

作为一个精通(没什么经验)的JAVA后端仔,搞这种有展示效果的代码,我苦思冥想......java不是有个AWT写界面来着,貌似当年大学写作业用过,但是现在全给忘了......然后去瞄了几眼,拉倒吧

还是突击一下前端搞个简单的html来的实在

所以接下来就开始专研搞个什么样的程序好玩好看又祝福的,一开始是想整个烟花+星空+祝福+对联的,效果图被路过的同事狠狠吐槽了

我:我的建议是你帮我也写一个(doge)

然后我就放弃了,因为确实......丑

好了!该干正事了!

本文将介绍如何创建一个具有弹幕效果的简单网页。我们将使用HTML、CSS和JavaScript来实现这个效果。以下是详细的步骤和代码示例。

1. 创建HTML结构

首先,我们需要创建一个基本的HTML结构来承载我们的弹幕效果。在<body>标签内,我们添加了一个用于显示弹幕的<div>容器(ID为"container"),以及一个包含输入框和发送按钮的弹幕输入区域(类名为"box1")。

html 复制代码
<!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动画。我们还设置了背景图、字体样式和其他一些美化页面的元素。

  1. 弹幕样式 (bullet) :设置弹幕的基本样式,包括绝对定位、字体大小、颜色、文字阴影、不换行和溢出隐藏。
  2. 手动输入弹幕样式 (danmu) :设置手动输入的弹幕样式,包括绝对定位、字体大小、颜色、文字阴影、正常换行以及移动动画效果。
  3. 弹幕输入框及按钮样式 (box1, .barrage-input, .barrage-but) :设置弹幕输入框及按钮的样式,包括定位、内边距、字体大小、边框圆角、去掉边框、阴影、背景颜色和字体颜色。
  4. 页面背景样式 (body) :设置页面背景样式,包括全局边距为0、隐藏页面滚动条、背景图片、适应屏幕大小、居中显示、字体设置和不透明度。
css 复制代码
<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,我们实现了一个定时器,用于动态生成和展示弹幕。同时,我们还支持用户手动输入弹幕的功能,通过点击发送按钮将弹幕添加到展示区域。

  1. 弹幕数据 (data) :定义了一组弹幕数据,每个弹幕有文本和颜色信息。
  2. 弹幕容器 (container) :通过 document.getElementById 获取弹幕容器,即拥有 id="container" 的元素。
  3. 弹幕生成逻辑 :通过定时器 (setInterval),每隔一定时间生成一个弹幕元素,随机选择弹幕位置,并通过动画效果让弹幕水平滚动。
  4. 手动输入弹幕:通过获取输入框和发送按钮的元素,监听发送按钮的点击事件,将手动输入的弹幕添加到弹幕容器。
js 复制代码
<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对我来说是最难调的,怪不得每次玩游戏捏脸捏着捏着就不耐烦。

相关推荐
EricWang135820 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning21 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人30 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js