<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿弹幕效果</title> <style> *{margin: 0;padding: 0;list-style: none;} html,body{width: 100%;height: 100%;} body{background-color: #000;font-family: '微软雅黑';} #danmu{position: relative;height: 100%;width: 100%;overflow: hidden;font-size: 50px;} #danmu .newli{background-color: #fff;height: 50px;line-height: 50px;position: absolute;overflow: hidden;} </style> </head> <body> <div id="danmu"></div> <script> var danmu=document.getElementById('danmu'); var winH=danmu.clientHeight; var speak=['哇塞好牛逼啊','好帅啊','前方高能','hahahahaha','哈哈哈哈','风流倜傥','我爱你阿啊啊啊','哈哈哈']; function insert(){ var newli=document.createElement('div'); var randomS=Math.floor(Math.random()*8); var r=Math.floor(Math.random()*266); var g=Math.floor(Math.random()*266); var b=Math.floor(Math.random()*266); newli.innerHTML=speak[randomS]; newli.className='newli'; newli.style.color='rgb('+r+','+g+','+b+')'; var t=winH-50; var newliT=Math.floor(Math.random()*(t-1)); var newliL=danmu.clientWidth; newli.style.left=newliL+'px'; newli.style.top=newliT+'px'; danmu.appendChild(newli); move(newli); } function move(obj){ var timer1=setInterval(function(){ // var danmu=document.getElementById('danmu'); var newliW=obj.clientWidth; var run=obj.offsetLeft; run--; if (run<=-newliW) { danmu.removeChild(obj); clearInterval(timer1); } obj.style.left=run+'px'; },1) } // insert(); var timer2=setInterval(function(){ insert(); },1000); window.onfocus=function (){ clearInterval(timer2); timer2=setInterval(function(){ insert(); },1000); } window.onblur=function (){ clearInterval(timer2); } </script> </body> </html>