当前位置：首页 > news >正文

js实现弹幕效果

news 2024/10/23 14:09:41

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: black;}.box{width: 800px;height: 500px;margin: 0 auto;margin-top: 20px;box-shadow: 0px 0px 20px black;overflow: hidden;position: relative;}ul{position: absolute;top: 0;left: 0;width: 800px;height: 400px;margin-top: 30px;}.dm{text-align: center;margin-top: 36px;}li{list-style: none;width: 500px;height: 30px;position: absolute;right: -10px;display: inline-block;z-index: 1;text-shadow: 0px 0px 20px black;}</style>
</head>
<body><div class="box"><video width="800px" height="500px" controls><source src="./vedio/20241022_202302.mp4" type="video/mp4"></video><ul class="send"></ul></div><div class="dm"><input type="text" name="" id=""><button>点击发送弹幕</button><button onclick="yjqp()">一键清屏</button><button onclick="hzdm()">弹幕轰炸</button></div><script>let inp = document.querySelector('input')let btn = document.querySelector('button')let dm = document.querySelector('.dm')let send = document.querySelector('.send')let box = document.querySelector('.box')let ul = document.querySelector('ul')let arr = []let j =0let bsetInterval(()=>{box.style.boxShadow=`0px 0px 20px rgb(${sj()},${sj()},${sj()})`},300)function sj(){return Math.floor(Math.random()*255)}btn.addEventListener('click',()=>{let li = document.createElement('li')li.innerHTML=inp.valuelet i=-520li.style.right=`${++i}px`li.style.textShadow=` 0px 0px 10px rgb(${sj()},${sj()},${sj()})`li.style.marginTop=`${sj()}px`li.style.color=`rgb(${sj()},${sj()},${sj()})`var a=setInterval(()=>{li.style.right=`${++i}px`if(i==400){clearInterval(a)}},8)ul.appendChild(li)})function sj(){let index = Math.floor(Math.random()*340)arr[++j]=indexif(j>10){for(let i=j-10;i<j;i++){if(arr[i]=arr[j]<20){arr[j]=arr[i]break;}}}return arr[j]}//    一键清屏function yjqp(){ul.innerHTML=''clearInterval(b)}// 轰炸弹幕let hz= ['太好看了','绝了','太赞了','666啊','杰瑞真帅','汤姆真美','汤姆666','汤姆吃草']function hzdm(){b=setInterval(()=>{let li = document.createElement('li')li.innerHTML=hz[Math.floor(Math.random()*hz.length)]let i=-520li.style.right=`${++i}px`li.style.textShadow=` 3px 3px 10px rgb(${sj()},${sj()},${sj()})`li.style.marginTop=`${sj()}px`li.style.color=`rgb(${sj()},${sj()},${sj()})`var a=setInterval(()=>{li.style.right=`${++i}px`if(i==800){clearInterval(a)}},8)ul.appendChild(li)// setTimeout(()=>{//     clearInterval(b)// },6000)},100)}</script>
</body>
</html>

效果图：