Use JS code to create barrage effects-JS Tutorial-php.cn

Use JS code to create barrage effects

php中世界最好的语言

Release： 2018-03-13 16:37:33

Original

3484 people have browsed it

This time I will show you how to use JS code to create barrage effects. What are the things to note? Here are actual cases, let’s take a look.

Implementation principle

1. Set the position attribute of the display barrage element to relative

2. Dynamically create the barrage element, set the position attribute to absolute, and left is the display width
3. Randomly set the top value of the barrage element
4. Randomly generate the movement rate of the barrage element and modify the left value

Random color

The first implementation is let color = '#' + Math. floor(Math.random() * 0xffffff).toString(16);

The second implementation let color = '#' + Math.floor(Math.random() * 16777215).toString(16) ;

The third implementation let r = Math.floor(Math.random()*256);let g = Math.floor(Math.random()*256);let b = Math.floor( Math.random()*256);let color = `rgb(${r},${g},${b})`;

Random rate

50 * +Math.random().toFixed(2)

Copy after login

Code

//html

<div class="container">
    <div id="content" class="content"></div>
    <div class="content-opt">
        <div id="content-text" class="content-text"></div>
        <div class="content-input">
            <input id="text" type="text">
            <button id="send">发送</button>
        </div>
    </div>
</div>

Copy after login

//css

* {
    box-sizing: border-box;
    outline: none;
}
p {
    margin: .5em;
    word-break: break-all;
}
.container {
    position: relative;
    width: 700px;
    height: 500px;
    margin: auto;
    padding-right: 200px;
}
.content {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;}
.content-opt {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
}
.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 1px solid #ccc;
    overflow: auto;
}
.content-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;}
.content-input input {
    width: 70%;
    padding: 2px;
    border-radius: 5px;
}
.content-input button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: rgb(90, 154, 214);
}

Copy after login

//js

(function () {
    class Barrage {
        constructor(id) {
            this.domList = [];
            this.dom = document.querySelector(&#39;#&#39; + id);            if (this.dom.style.position == &#39;&#39; || this.dom.style.position == &#39;static&#39;) {
                this.dom.style.position = &#39;relative&#39;;
            }
            this.dom.style.overflow = &#39;hidden&#39;;            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }
        shoot(text) {            let div = document.createElement(&#39;div&#39;);
            div.style.position = &#39;absolute&#39;;
            div.style.left = this.domWidth + &#39;px&#39;;
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + &#39;px&#39;;
            div.style.whiteSpace = &#39;nowrap&#39;;
            div.style.color = &#39;#&#39; + Math.floor(Math.random() * 0xffffff).toString(16);
            div.innerText = text;
            this.dom.appendChild(div);            let roll = (timer) => {                let now = +new Date();
                roll.last = roll.last || now;
                roll.timer = roll.timer || timer;                let left = div.offsetLeft;                let rect = div.getBoundingClientRect();                if (left < (rect.left - rect.right)) {
                    this.dom.removeChild(div);
                } else {                    if (now - roll.last >= roll.timer) {
                        roll.last = now;
                        left -= 3;
                        div.style.left = left + &#39;px&#39;;
                    }
                    requestAnimationFrame(roll);
                }
            }
            roll(50 * +Math.random().toFixed(2));
        }
    }    let barage = new Barrage(&#39;content&#39;);    function appendList(text) {        let p = document.createElement(&#39;p&#39;);
        p.innerText = text;
        document.querySelector(&#39;#content-text&#39;).appendChild(p);
    }
    document.querySelector(&#39;#send&#39;).onclick = () => {        let text = document.querySelector(&#39;#text&#39;).value;
        barage.shoot(text);
        appendList(text);
    };
    const textList = [&#39;弹幕&#39;, &#39;666&#39;, &#39;233333333&#39;, &#39;javascript&#39;, &#39;html&#39;, &#39;css&#39;, &#39;前端框架&#39;, &#39;Vue&#39;, &#39;React&#39;, &#39;Angular&#39;,        &#39;测试弹幕效果&#39;
    ];
    textList.forEach((s) => {
        barage.shoot(s);
        appendList(s);
    })
})()

Copy after login

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!