js利用节点，封装函数进行简单弹幕制作

最新推荐文章于 2023-12-03 19:24:47 发布

banwei7749

最新推荐文章于 2023-12-03 19:24:47 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/Y-Gang/p/10676087.html

版权

js简单弹幕制作（注：简单弹幕从右向左执行，除了数字字母之外，汉字执行会出现出框是排列向下成一排清空状态（如下图），不必担心，简单弹幕的问题后续有说明和解决方案）。

此问题原因，元素定位之后，元素失去宽度。

解决方案：在弹幕父元素（）加上width:max-content;即可

思路：

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%;

width:max-content;

}
.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);

}

转载于:https://www.cnblogs.com/Y-Gang/p/10676087.html

banwei7749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js利用节点，封装函数进行简单弹幕制作

js简单弹幕制作（注：简单弹幕从右向左执行，除了数字字母之外，汉字执行会出现出框是排列向下成一排清空状态（如下图），不必担心，简单弹幕的问题后续有说明和解决方案）。此问题原因，元素定位之后，元素失去宽度。解决方案：在弹幕父元素（）加上width:max-content;即可思路： 1、在输入框内输入值显示在显示区域里 2、发送完...
复制链接

扫一扫