js实现弹幕

徒手捏爆小行星

于 2025-03-13 14:41:20 发布

阅读量205

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 js 前端

本文链接：https://blog.youkuaiyun.com/m0_58981357/article/details/146230400

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <div class="main"></div>
</body>
<script src="./js/index.js"></script>

</html>

// css
* {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
    background-color: cadetblue;
}

.main {
    width: 100%;
    height: max-content;
    background-color: burlywood;
    overflow: hidden;
}

.main .barrage {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    background-color: dimgrey;
    position: relative;
    display: flex;
    align-items: center;
}

.main .barrage>div {
    position: absolute;
    right: 0%;
    transform: translateX(100%);
    background-color: indianred;
    text-wrap: nowrap;
}

@keyframes barrageMove {
    from {
        right: 0;
        transform: translateX(100%);
    }

    to {
        right: 100%;
        transform: translateX(0);
    }
}

// js 添加元素的地方使用到了jquery
// 获取信息
function getData() {
    return new Promise(function (resolve, reject) {
        fetch("http://jsonplaceholder.typicode.com/posts").then((response) => {
            const data = response.json();
            resolve(data)
        }).catch((error) => {
            reject(error)
        })
    })
}

let list = [];
let num = 0;
// 渲染（定义多少行弹幕）
function rend(num) {
    list = Array.from({ length: num }, () => []);
    const element = document.querySelector('.main');
    for (let i = 0; i < parseInt(num); i++) {
        let ele = document.createElement('div');
        ele.setAttribute('class', `barrage barrage${i + 1}`)
        element.appendChild(ele);
    }
}
var timer;
function mySetInterval(fn, millisec) {
    function interval() {
        timer = setTimeout(interval, millisec);
        fn();
    }
    timer = setTimeout(interval, millisec)
}

function addBarrage() {
    let elements = document.querySelectorAll('.barrage');
    for (let i = 0; i < elements.length; i++) {
        let parent = elements[i];
        let element = elements[i].lastElementChild;
        if (element == null) {
            let html = `<div>${list[num].title}</div>`;
            $(parent).append(html);
            let width = document.querySelector('.main').offsetWidth;
            let width1 = parent.lastElementChild.offsetWidth;
            parent.lastElementChild.addEventListener('animationend', function (e) {
                e.target.remove();
            })
            parent.lastElementChild.style.animation = `barrageMove ${(width1 + width) * 4000 / width}ms linear forwards`;
            num < list.length - 1 ? num++ : num = 0;
        } else {
            let info = element.getBoundingClientRect();
            if (parent.clientWidth > info.right) {
                let html = `<div>${list[num].title}</div>`;
                $(parent).append($(html));
                let width = document.querySelector('.main').offsetWidth;
                let width1 = parent.lastElementChild.offsetWidth;
                parent.lastElementChild.addEventListener('animationend', function (e) {
                    e.target.remove();
                })
                parent.lastElementChild.style.animation = `barrageMove ${(width1 + width) * 4000 / width}ms linear forwards`;
                num < list.length - 1 ? num++ : num = 0;
            }
        }
    }
}
async function init() {
    rend(4)
    list = await getData();

    mySetInterval(() => {
        addBarrage()
    }, 500);
}

window.onload = () => {
    init();
}