SOURCE

function sendHandler() {
    var value = document.getElementById('sendInput').value;
    var main = document.getElementById('main');
    var div = document.createElement('div');
    var body = document.getElementsByTagName("body")[0];
    div.innerHTML = value;
    body.appendChild(div);
    div.className = 'danmu';
    div.style.position = 'absolute';
    var left = main.offsetWidth - div.offsetWidth;
    var top = Math.floor(Math.random() * main.offsetHeight);
    div.style.left = left + 'px';
    div.style.top = top + 'px';
    slide(div,main);
}

function slide(div, main) { 
    var left = +div.style.left.slice(0, div.style.left.length -2);
    var interval = setInterval(function(){
        if(left <= 10){
            div.style.left = main.offsetWidth - div.offsetWidth + 'px';
            left = +div.style.left.slice(0, div.style.left.length -2);   
        }
        left -=  1;
        div.style.left = left + 'px';
    }, 16.7);
}

function clearHandler() {
    var danmuDiv = document.getElementsByClassName('danmu');
    for(var i =danmuDiv.length-1;i>=0;i--) {
        danmuDiv[i].remove();
    }
}

<div class="content">
    <div class="main" id='main'></div>
    <div class='inputClass'>
        <input id='sendInput' type="text" placeholder="请输入弹幕">
        <div class="buttonClass">
            <button onclick="sendHandler()">发送</button>
            <button onclick="clearHandler()">清屏</button>
        </div>
    </div>
</div>

.content {
    position: relative
}

.main {
    height:300px;
    width:100%;
    border: 1px solid #cccccc;
}

.inputClass {
    position: absolute;
    left: 50%;
    margin-top: 20px;
    text-align: center;
}

.buttonClass {
    margin-top: 10px;
}