DOM之弹幕效果

2021-09-02 19:01:25 阅读：127 来源： 互联网

标签：style span 效果 DOM 标签 height words document 弹幕

方法一

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .newList{
                height: 100px;
                overflow: hidden;
                background-color: #ccc;
                position: relative;
            }
        </style>
    </head>
    <body>
        <input type="text" id="words" />
        <input type="button" value="走你" id="btn" />
</body>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        var timer=null;
        var words=document.getElementById("words").value;
        // 创建span标签
        var span=document.createElement("span");
        // 将输入的内容塞到HTML中
        span.innerHTML=words;
        // 给span标签定位
        span.style.position="absolute";
        span.style.left="600px";
        // 利用随机数，来决定每一个标签的高度的不同
        // Math.floor是让小数取整，例如1.99为1
        // document.documentElement.clientHeight代表HTML标签的高度
        span.style.top=Math.floor(document.documentElement.clientHeight*Math.random())+"px";
        // 将span挂载到树上
        document.body.appendChild(span);
        timer=setInterval(function(){
            // 让span标签一次走4px的像素
            span.style.left=parseInt(span.style.left)-4+"px"
            // 表示当span的左边的距离小于span内容的长度时销毁，即当标签完全消失在页面中时销毁
            if(parseInt(span.style.left)<-1*span.offsetWidth){
                clearInterval(timer);
                document.body.removeChild(span)
            }
        },50)
        // 这个50代表每50毫秒，走一次
    }
</script>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .newList{
            height: 100px;
            overflow: hidden;
            background-color: #ccc;
            position: relative;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
    </style>
</head>
<body>
    <input type="text" id="words" />
    <input type="button" value="走你" id="btn" />
</body>
<script>
    function Bullet(words){
        this.span=document.createElement("span");
        //这个利用随机数来实现字体在屏幕中字体大小的不同
        if(Math.random()<0.2){
            this.span.style.fontSize="50px";
        }
        //给span标签定位
        this.span.style.position="absolute";
        this.span.style.left=document.body.offsetWidth+"px";
        //让弹幕从不同的高度出来
      this.span.style.top=Math.floor(document.body.offsetHeight*Math.random())+"px";
        this.span.innerHTML=words;
        this.timer=null;
        this.init();
        this.move();
    }
    Bullet.prototype.init=function(){
        document.body.appendChild(this.span)
    }
    Bullet.prototype.move=function(){
        let that=this;
        //定义span在每50毫秒走4像素的距离
        //当弹幕完全消失在屏幕时被销毁和销毁定时器
        this.timer=setInterval(function(){
            that.span.style.left=parseInt(that.span.style.left)-4+"px";
            if(parseInt(that.span.style.left)<-1*that.span.offsetWidth){
                document.body.removeChild(that.span)
                clearInterval(that.timer)
            }
      },50) 
    }
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        let words=document.getElementById("words").value;
        let obj=new Bullet(words);
    }
</script>
</html>

标签：style,span,效果,DOM,标签,height,words,document,弹幕
来源： https://www.cnblogs.com/w-sir/p/15220176.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

DOM之弹幕效果

方法一

方法二