荧屏弹幕_新增h5requestAnimationFrame实现

所有的页面逻辑也是比较简单，用原生js实现，封装也是比较简单！要让页面效果更为炫酷，则可去引入相应的css,背景图片自己去img/下下载引入喔！

HTML页面

<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta name="keywords" content="">

<meta name="description" content="">

<!-- <link rel="stylesheet" href="css/li.css"> -->

<style>

*{

padding: 0;

margin: 0;

}

html,body{

height: 100%;

user-select:none;

}

.screen{

    overflow: hidden;

    position: relative;

    height: 100%;

    background-color: rgba(0,0,0,0.8);

    background-image: url(img/bright5.gif);

    background-repeat: no-repeat;

    background-size: 100% 100%;

}

.send{

position: absolute;

bottom: 0;

width: 100%;

height: 80px;

line-height: 80px;

background-color: rgba(10,10,10,0.6);

text-align: center;

}

.input{

position: absolute;

left: 50%;

top: 50%;

margin: -20px -350px;

font-size: 0;

}

.text{

float: left;

width: 600px;

height: 40px;

border: none;

border-radius: 8px 0 0 8px;

}

.s_show div{

position: absolute;

font-size: 24px;

font-weight: bold;

}

.btn{

float: left;

width: 100px;

background-color:black;

line-height: 40px;

font-size: 24px;

color: #fff;

cursor: pointer;

border-radius: 0 8px 8px 0;

}

</style>

 

<title>Welcome to coming</title>

</head>

<body>

<div class="screen">

<div class="send">

<div class="input clearfix">

<input type="text" class="text">

<div class="btn">Send</div>

</div>

</div>

<div class="s_show">

<div class="magictime twisterInUp">你好！欢迎来到赖清华的世界</div>

<div class="magictime twisterInUp">亲亲，我是爱你的呀</div>

<div class="magictime twisterInUp">"略略略~，你这是简直不要太喜欢我啦！</div>

<div class="magictime twisterInUp">年轻人，不要总是睡喔！</div>

</div>

</div>

<script>

//模块化 每个功能函数去做自己相应的事情 代码可维护性 可扩展性

//初始化函数

var aShowList = document.querySelectorAll('.s_show div');//获取元素 H5

var oShow = document.querySelector('.s_show');

var oSend = document.querySelector('.send');

var oBtn = document.querySelector('.btn');

var oText = document.querySelector('.text');

var time = 0;//上一次你发送的时间

var time1 = 0;

//点击发送弹幕

 

oBtn.onclick = function(){//鼠标点击事件

sendContent();

}

//按键盘的"enter"键发送内容

oText.onkeyup = function (ev) {

var e = ev || window.event;

if (e.keyCode == 13) {

sendContent();

}

}

 

function sendContent(){

//oBtn.style.backgroundColor = randomColor();//按钮背景颜色变换

time1 = new Date();

oBtn.style.color = randomColor();//按钮字体颜色变换

if(time1 - time > 1000){//2次发送的时间必须大于1秒

var oDiv = document.createElement('div');//创建div

oDiv.innerHTML = oText.value;//添加弹幕内容

oDiv.className = 'magictime twisterInUp';//弹幕特效

oShow.appendChild(oDiv);//添加一个子节点

init(oDiv);//初始化

oText.value = '';

time = time1;

//console.log(time);

}else{

alert("略略略~，你这是简直不要太喜欢我啦！请稍后再发~");

}

}

 

for(var i = 0;i < aShowList.length;i++){

init(aShowList[i]);//执行初始化函数

}

 

function init(obj){//接受弹幕对象

//确定top值的随机区间

var screenHeight = document.documentElement.clientHeight;//获取屏幕可视高度

var maxTop = screenHeight - oSend.offsetHeight - obj.offsetHeight;//高度差范围

obj.style.top = maxTop * Math.random() + 'px';

//控制left值

var screenWidth = document.documentElement.clientWidth;//获取可视宽度

var maxLeft = screenWidth - obj.offsetWidth - Math.random() * 100;//随机宽度差

obj.style.left = maxLeft + 'px';

//弹幕的随机颜色

obj.style.color = randomColor();

/*setInterval(function(){

move(obj,maxLeft);

},1000);*///普通定时器

move(obj,maxLeft);

}

//弹幕移动函数

function move(obj,maxLeft){

var speed = 5;//控制速度的变量

maxLeft -= speed;//往左移动

if(maxLeft > -obj.offsetWidth){

obj.style.left = maxLeft + 'px';

requestAnimationFrame(function(){

move(obj,maxLeft);

});//H5新增的动画函数

}else{

//init(obj);//重新初始化 营造循环弹幕效果

oShow.removeChild(obj);//DOM删除子节点

}

}

//随机颜色函数

function randomColor(){

return '#' + Math.random().toString(16).slice(-6);//一行简化版截取后六位

/*var str = '#';

for(var i = 0;i < 6;i++){

str += Math.floor(Math.random() * 16).toString(16);

}

return str;*///普通逻辑版

}

</script>

</body>

</html>