简易弹幕

最新推荐文章于 2021-05-26 02:26:35 发布

mrgaohaihang

最新推荐文章于 2021-05-26 02:26:35 发布

阅读量75

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/mrgaohaihang/article/details/110286262

版权

web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 600px;
            height: 500px;
            border:3px solid black;
            position: relative;
            overflow: hidden;
        }
        #box span{
            position:absolute;
            left: 500px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <input id='inp'/>
    <button id="hidden">隐藏</button>
    <script>
        var box=document.getElementById('box');
        var inp=document.getElementById('inp');
        inp.onkeypress=function(e){
                if(e.keyCode==13){
                    var span=document.createElement('span');
                      hidden.onclick=function(){
                 if(span.style.display='none')
                   span.style.display='none';
                   else{
                       span.style.display='block';
                   }
            }
                    span.innerHTML=this.value;
                    span.style.top=Math.random()*300+'px';
                    // span.style.left='300px';
                   var timer= setInterval(function(){
                           span.style.left=parseInt(span.style.left)-1+'px';
                           if(parseInt(span.style.left)<-span.offsetWidth)
                           {
                               box.removeChild(span);
                               clearInterval(timer);
                           }
                    },100)
                    box.appendChild(span);
                }
        }
    </script>
</body>
</html>

mrgaohaihang

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #box{ width: 600px; height: 500px; border:3px solid black; position: relative; .
复制链接

扫一扫