弹幕

最新推荐文章于 2024-03-16 16:44:03 发布

诸葛苍穹

最新推荐文章于 2024-03-16 16:44:03 发布

阅读量342

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/u012260672/article/details/62099558

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="background-color: #000000">

<input type="text" id="txt" style="width: 300px;height: 50px;"/>

<input  type="button" value="按钮" id="btn" style="height: 50px;width: 80px;"/>

</body>
</html>

<script>
    var btn = document.getElementById('btn');
    var txt = document.getElementById('txt');

    btn.onmousemove = function(){
        var timer = null;
        var span = document.createElement('span');
        span.innerHTML = txt.value;
        span.style.position = 'absolute';
        span.style.left = document.body.offsetWidth +'px';
        span.style.color = "rgba"+"("+parseInt(Math.random()*100)+","+parseInt(Math.random()*100)+","+parseInt(Math.random()*100)+","+Math.random()+")";
        span.style.fontSize = Math.floor(document.body.offsetHeight * Math.random())+'px';
        span.style.top = Math.floor(document.body.offsetHeight * Math.random()*10)+'px';
        document.body.appendChild(span);


        timer = setInterval(function(){
            span.style.left = parseInt(span.style.left) - 4 +'px';
            if(parseInt(span.style.left )< -1 * span.offsetWidth){
                document.body.removeChild(span);
                clearInterval(timer);
            }

        },50);
    };




</script>

诸葛苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹幕

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body style="background-color: #000000"><input type="text" id="txt" style="width: 300px;height: 50px;"/><i
复制链接

扫一扫

专栏目录