滚动弹幕JS

题八:滚动弹幕

要求:

1.页面上漂浮字体大小不一、颜色不一,从左向右滚动的弹幕;

2.底部中间有一个发送功能,可以发送新的弹幕;

3.底部的发送部分可以向下收起和弹出。

原理:

  1. 首先写出弹幕的大小,颜色,等,!!一定要return,不然出不来。

  2. 要实现左移要不断加速度,当位置大于屏宽时,关闭定时器并移除弹幕。

  3. 在输入框中的文本传值时,调用createDanmuElement和滚动弹幕函数。

  4. 主要是靠公式: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>
    <button id="send">发送</button>
    <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>

视频:

滚动弹幕

相关推荐
爷_2 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee444 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro5 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin5 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说5 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2436 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你6 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2436 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴6 小时前
Tile Pattern
前端·webgl