许愿弹幕简写，思路

最新推荐文章于 2023-11-21 11:27:20 发布

满楼听風雨

最新推荐文章于 2023-11-21 11:27:20 发布

阅读量140

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/qinyang19971014/article/details/122243250

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚元素的外边距和内边距 */
        * { 
            padding: 0;
            margin: 0;
        }
        /* 浏览器可视窗口高度 弹性布局居中 */
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ecf0f1;
        }
        .box {
            position: absolute;
            right: 0;
            height: 100%;

        }
    </style>
    <!-- 引入随机数 -->
    <script src="./random.js"></script> 
</head>
<body>
    <div> 
        <!--多行文本域  -->
        <textarea name="text" id="" cols="30" rows="5" placeholder="许愿清泉流响" style="resize: none;"></textarea> 
        <input type="button" value="许愿">
    </div>

    <div class="box"></div>
    <!-- JS -->
    <script>
        const bth = document.querySelector('[type="button" ]'); // 获取许愿按钮
        const text = document.querySelector('[name="text"]');  // 获取文本按钮
        const box = document.querySelector('.box'); //获取弹窗的父元素
        let width = innerWidth - 150;    
        let height = innerHeight - 100;
        bth.onclick = function () { // 点击事件  
            if (text.value) { //判断用户是否输入内容
                let p = document.createElement('p');  // 创建一个P元素
                p.innerText = text.value;  // 获取用户输入内容，装进创建P 元素
                text.value = ''; // 用户输入内容，清空一次。
                box.appendChild(p); // 创建的元素添加入 弹幕元素里面
                let x = 0;  // 申请变量X坐标变量
                p.style.cssText = `
                    text-align: center;
                    background-color: rgb(${random(255)}, ${random(255)}, ${random(255)});   // 随机背景色
                    color:rgb(${random(255)}, ${random(255)}, ${random(255)});   // 随机字体颜色
                    width:150px; 
                    height:100px;
                    position: absolute; 
                    top:${random(height)}PX;  
                `; 
                let time = setInterval(() => {  // 计数器
                    x++;
                    p.style.right = x + 'px';   // 增加移动X坐标
                    if (x == width) {       // X到达右边临界值
                        box.removeChild(p); //删除元素
                        clearInterval(time); // 结束计数器 防止叠加
                    }
                }, 10)
            }
        }
    </script>
</body>
</html>

满楼听風雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
许愿弹幕简写，思路

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫