js利用节点，封装函数进行简单弹幕制作
Posted y-gang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js利用节点，封装函数进行简单弹幕制作相关的知识，希望对你有一定的参考价值。
js简单弹幕制作（注：简单弹幕从右向左执行，除了数字字母之外，汉字执行会出现出框是排列向下成一排清空状态（如下图），不必担心，简单弹幕的问题 后续有说明和解决方案）。
思路：
1、在输入框内输入值显示在显示区域里
2、发送完毕，输入框内清空
3、弹幕从右向左，且多行（可控）
4、性能优化处理（显示完毕清空弹幕，计时器）
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0;
outline: none;}
#barrage{
background: black;
margin:30px auto 0px;
width:500px;
height:500px;
border-radius: 20px;
position: relative;
overflow: hidden;
}
#barrage>p{
position: absolute;
right: -100%;
}
.text{
margin:0 auto;
width:500px;
}
.text>*{
float: left;
}
input{
border: none;
border:1px solid #00FFFF;
background: aliceblue;
width:90%;
height:30px;
border-radius: 5px;
}
#send{
border: none;
border:1px solid #CCCCCC;
width:9%;
height:30px;
border-radius: 5px;
}
#box{
border:1px solid #ccc;
height:500px;
width:500px;
margin:500px;`
background: #00FFFF;
overflow: hidden;
}
</style>
</head>
<body>
<div id="barrage"></div>
<div class="text">
<input type="text" id="js_input">
<button id="send">弹幕</button>
</div>
</body>
</html>
<script src="js/common.js"></script>
<script>
var osend = document.getElementById("send");
var js_input = document.getElementById("js_input");
var obarrage = document.getElementById("barrage");
osend.onclick = function(){
var val = js_input.value;//获取输入框里的值
js_input.value ="";
//创建一个p标签，使p标签接受来自输入框里的值
var p = document.createElement("p");
p.innerText = val;
p.style.color = randomColorTo();//引用封装函数随机颜色加给弹幕
p.style.top = numRandom(0,200) +"px";//引用封装函数随机数控制弹幕上下范围
obarrage.appendChild(p);//子节点后添加新的子节点
//调用下面的函数进行优化
moveTo(p);
}
</script>
//所需封装函数
//清空函数
function moveTo(ele) {
var r = 0;
ele.timer = setInterval(function(){ //控制弹幕速度方向
r += 5;//控制速度
if(r==800){
ele.remove();//当不在0-800范围内时 移除弹幕
clearInterval(ele.timer);//清除定时器(性能优化)
}
ele.style.right = r +"px";//控制方向
},30)
}
//随机数
function numRandom(n, m) {
if (n > m) {
return parseInt(m + Math.random() * (n - m + 1));
} else {
return parseInt(n + Math.random() * (m - n + 1));
}
}
//随机颜色
function randomColorTo() {
var r = numRandom(0, 255);
var g = numRandom(0, 255);
var b = numRandom(0, 255);
return "#" + colorZero(r, g, b);
}
以上是关于js利用节点，封装函数进行简单弹幕制作的主要内容，如果未能解决你的问题，请参考以下文章
哇哦，弹幕居然是这么弄出来的！一文学会如何用js制作一个弹幕效果