<!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>
