简易弹幕

最新推荐文章于 2024-09-15 22:12:53 发布

V________

最新推荐文章于 2024-09-15 22:12:53 发布

阅读量104

点赞数

分类专栏：练习文章标签： html js javascript css3

本文链接：https://blog.csdn.net/V________/article/details/112482947

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

//获取随机数
function getNum(min, max = 0) {
    min > max ? [min, max] = [max, min] : "";
    return parseInt(Math.random() * (max - min + 1)) + min;
}

let divEle = document.querySelector("div");

let inpEles = document.getElementsByTagName("input");
inpEles[1].addEventListener("click", e => {
    //创建弹幕节点
    let spanEle = document.createElement("span");
    spanEle.innerText = inpEles[0].value;
    spanEle.style.color = inpEles[2].value;
    divEle.appendChild(spanEle);
    //获取节点起始位置
    let moveXlength = parseInt(window.getComputedStyle(divEle, null).width);
    let moveYlength = parseInt(window.getComputedStyle(divEle, null).height);
    //节点可移动Top的最大值
    let moveTopMax = moveYlength - spanEle.offsetHeight;
    spanEle.style.top = getNum(0, moveTopMax) + "px";
    let timer = setInterval(function() {
        //移动节点
        spanEle.style.left = --moveXlength + "px";
        //获取节点宽度
        if (parseInt(spanEle.style.left) == -spanEle.clientWidth) {
            clearInterval(timer);
            spanEle.remove();
        }
    }, getNum(1, 10)); //随机弹幕的速度
});

<!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="./index.css">
</head>

<body>
    <div>

    </div>
    <input type="text" placeholder="让弹幕飞一会儿～">
    <input type="button" value="发送">
    <input type="color">
    <script src="../tools.js"></script>
    <script src="./index.js"></script>
</body>

</html>