滚动弹幕JS
题八：滚动弹幕
要求：
1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；
2.底部中间有一个发送功能，可以发送新的弹幕；
3.底部的发送部分可以向下收起和弹出。
原理：
- 首先写出弹幕的大小，颜色，等，！！一定要return，不然出不来。
- 要实现左移要不断加速度，当位置大于屏宽时，关闭定时器并移除弹幕。
- 在输入框中的文本传值时，调用createDanmuElement和滚动弹幕函数。
- 主要是靠公式：Math.floor(Math.random() * n ) + 1
<!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>
#danmu-container {
position: relative;
width: 100%;
height: 400px;
border: 1px solid #ccc;
}
#down {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f0f0f0;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
#down.hidden {
bottom: -50px;
}
#message-input {
width: 300px;
padding: 5px;
margin-right: 10px;
}
#send {
padding: 5px 10px;
}
#up {
position: absolute;
bottom: 10px;
left: 10px;
}
</style>
</head>
<body>
<body>
<div id="danmu-container"></div>
<div id="down">
<input type="text" id="message-input" placeholder="请发送一条友善的弹幕吧！">
<button id="send">发送</button>
</div>
<button id="up">收起/弹出</button>
<script>
const danmuContainer = document.getElementById('danmu-container');
const Down = document.getElementById('down');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send');
const upButton = document.getElementById('up');
let isInputHidden = false;
function createDanmuElement(text) {
const danmu = document.createElement('div')
danmu.textContent = text;
danmu.style.position = 'absolute'
//弹幕进入
danmu.style.left = '-200px'
//弹幕高度随机
danmu.style.top = Math.floor(Math.random() * (danmuContainer.clientHeight - 30)) + 'px'
//颜色随机
danmu.style.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
//大小随机
danmu.style.fontSize = Math.floor(Math.random() * 20) + 12 + 'px'
//弹幕不换行
danmu.style.whiteSpace = 'nowrap'
//添加在后面
danmuContainer.appendChild(danmu)
return danmu
}
function moveDanmu(danmu) {
//弹幕初始位置
let left = -200
const speed = Math.floor(Math.random() * 3 ) + 1
//从左到右
const Timer = setInterval(() => {
//实现右移，每次移动一个speed
left += speed
danmu.style.left = left + 'px'
if (left > danmuContainer.clientWidth) {
clearInterval(Timer)
//关闭定时器后要移除弹幕
danmuContainer.removeChild(danmu)
}
}, 10)
}
//传值，把打字框里的文本传给弹幕
sendButton.addEventListener('click', function() {
const text = messageInput.value
const danmu1 = createDanmuElement(text)
moveDanmu(danmu1)
messageInput.value = ''
});
upButton.addEventListener('click', function() {
isInputHidden =!isInputHidden
if (isInputHidden) {
Down.classList.add('hidden')
upButton.textContent = '弹出'
} else {
Down.classList.remove('hidden')
upButton.textContent = '收起'
}
})
//先飘一些弹幕
for (let i = 0; i < 5; i++) {
const text = `弹幕1111`
const danmu = createDanmuElement(text)
moveDanmu(danmu)
}
</script>
</body>
</html>
视频：
滚动弹幕