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

}

原文地址:https://www.cnblogs.com/Y-Gang/p/10676087.html

时间: 2024-10-10 08:41:07

js利用节点,封装函数进行简单弹幕制作的相关文章

js利用闭包封装自定义模块的几种方法

1.自定义模块: 具有特定功能的js文件 将所有的数据和功能都封装在一个函数的内部 只向外暴露一个包含有n个方法的对象或者函数 模块使用者只需要通过模块暴露的对象调用方法来实现相对应的功能 1.利用函数方法自调用 /** * Created by lonecloud on 2017/9/10. */ (function (window) { var DEBUG="debug" /** * 打印日志 * @param args */ function log(args) { consol

利用PHP绘图函数实现简单验证码功能

index.php __________________________________________________________________________________________________________________________ <?php//===================================>>使用绘图技术绘制验证码 //1.随机产生4个随机数$checkCode="";for ($i=0;$i<4;$i

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一个接收动态添加div的容器 <div> 功能区域 <br /> <input id="1" type="checkbox" value="新闻" name="11" />新闻 <input id="2" type="checkbox"

四舍五入的一些简单写法(利用内置函数,算法2种写法)

?       //内置函数的写法        //网上零售价和折扣价在计算结束需要进行进位,规则如下:         //个位为1,2,3,4进位到5,例如计算后的价格为1201,则价格为1205:         //个位为6,7,8,9进位到0,例如计算后的价格为1209.则价格为1210:         public static string ChangePrice(double price)         {             int changed = 0;     

[stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画

>_<:这里的动画是黄色矩形区域中一个模仿俯视图的起重机运作动画,一个是模仿主视图的吊钩的运动.通过改变初始Init函数中的数据b_x,b_y实现矩形区域的移动.当实时采集时要首先根据起重机的实际情况改变比例,当传感器传来数据时就相当于这里的run函数,只要把传感器数据接收函数和相关函数结合即可. >_<:main code: 1 #include "stdlib.h" 2 #include "GUI.H" 3 /* 4 颜色 5 */ 6

js 利用iframe和location.hash跨域解决办法,java图片上传回调JS函数跨域

奶奶的:折腾了我二天,终于解决了!网上有很多例子. 但跟我的都不太一样,费话不多说了,上图   上代码: IE ,firefix,chrome 测试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var for

JS运动缓冲的封装函数

之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). 1 /* 2 物体多属性同时运动的函数 3 obj:运动的物体 4 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 5 ratio:速度的系数 6 */ 7 function bufferMove(obj, oTarget, fn,ratio = 8) { 8 clearInterval(obj.iTimer); 9 obj.iTimer = setInterval(function () { 10 //

js面向对象学习笔记(二):工厂方式:封装函数

//工厂方式:封装函数function test(name) { var obj = new Object(); obj.name = name; obj.sayName = function () { alert(this.name); }; //抛出 return obj;}var p1 = test('小明');p1.sayName();var p2 = test('小王');p2.sayName(); //优化//创建对象要注意首字母大写//当new去调用一个函数:这个时候函数中的thi

第110天:Ajax原生js封装函数

一.Ajax的实现主要分为四部分: 1.创建Ajax对象 1 // 创建ajax对象 2 var xhr = null; 3 if(window.XMLHttpRequest){ 4 xhr = new XMLHttpRequest(); 5 } else { 6 //为了兼容IE6 7 xhr = new ActiveXObject('Microsoft.XMLHTTP'); 8 } 2.连接服务器 // 连接服务器open(方法GET/POST,请求地址, 异步传输) xhr.open('G