html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<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>
</body>
<script src="main.js"></script>
</html>
css
* {
box-sizing: border-box;
outline: none;
}
p {
margin: .5em;
word-break: break-all;
}
.container {
position: relative;
width: 700px;
height: 500px;
margin: auto;
}
.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);
}
js
(function () {
class Barrage {
constructor(id) {
this.domList = [];
this.dom = document.querySelector('#' + id);
if (this.dom.style.position == '' || this.dom.style.position == 'static') {
this.dom.style.position = 'relative';
}
this.dom.style.overflow = 'hidden';
let rect = this.dom.getBoundingClientRect();
this.domWidth = rect.right - rect.left;
this.domHeight = rect.bottom - rect.top;
}
// 发送弹幕
shoot(text) {
let div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = this.domWidth + 'px';
div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
div.style.whiteSpace = 'nowrap';
div.style.color = '#' + Math.floor(Math.random() * 256).toString(10);
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 + 'px';
}
requestAnimationFrame(roll);
}
}
roll(50 * +Math.random().toFixed(2));
}
}
// 获取整个屏幕的宽高
let barage = new Barrage('content');
console.log(barage.shoot);
function appendList(text) {
let p = document.createElement('p');
p.innerText = text;
document.querySelector('#content-text').appendChild(p);
}
document.querySelector('#send').onclick = () => {
let text = document.querySelector('#text').value;
barage.shoot(text);
appendList(text);
};
// 所有的弹幕
const textList = ['蜘蛛侠', '666', '233333333', 'javascript', 'html', 'css', '前端框架', 'Vue', 'React', 'Angular',
'钢铁侠'
];
textList.forEach((s) => {
barage.shoot(s);
// 向右侧弹幕添加发送过的弹幕
appendList(s);
})
})();