纯JS实现基本弹幕效果
实现步骤：
第一种：
1. html结构：
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">弹幕:</p>
<input type="text" class="text" id="text" />
<button type="button" class="btn" id="btn">发送</button>
</div>
</div>
</div>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">弹幕:</p>
<input type="text" class="text" id="text" />
<button type="button" class="btn" id="btn">发送</button>
</div>
</div>
</div>
css样式根据个人需求设置，就不一一赘述了。
2.script
// 获取发射按钮btn
var btn = document.querySelector('#btn');
// 获取input框
var input = document.querySelector('#text');
var timer = null;
// 给发射按钮绑定点击事件 DOM2
btn.addEventListener('click', send);
// 绑定键盘事件 DOM2
input.addEventListener('keyup', function (event) {
let e = event || window.event;
// 判断一下是否点了enter键，enter的keycode为13
if (e.keyCode == 13) {
// 直接调用发射按钮的点击事件
send();
// console.log("键盘事件绑定成功");
}
})
// 封装函数send
function send() {
// 1-1 设置一波随机颜色
var color = "#" + Math.random().toString(16).slice(-6);
// console.log(color);
// 1-2 设置一个随机高度
var randomY = parseInt(Math.random() * 400);
// 2 获取input的value值
var inputVal = input.value;
// span标签的内容就是input的value值
// 3 动态创建一个span标签
var span = document.createElement('span');
// console.log(span);
// 将 input框中 输入 的 值 赋给 span 作为内容
span.innerHTML = inputVal;
// 4 设置span的样式：
span.style.left = 1500 + 'px'; //初始randomX坐标在浏览器外，不在可视区
span.style.top = randomY + 'px';
span.style.color = color;
document.querySelector('#boxDom').appendChild(span);
// 每次开始运动前先清除一次计时器，否则越来越快
clearInterval(span.timer);
// 弹幕做匀速运动
span.timer = setInterval(function () {
// 第一种写法：（时间设置长一点）
// num -= 100;
// span.style.left = num + 'px';
// if(num <= -200){
// clearInterval(span.timer);
// span.remove();
// }
// 第二种写法：
span.style.left = span.offsetLeft - 10 + 'px';
if (span.offsetLeft <= -200) {
// 清除一次计时器
clearInterval(span.timer);
span.remove();
}
}, 30);
// 每一次点击成功后清空input框内数据
input.value = '';
}
// 获取发射按钮btn
var btn = document.querySelector('#btn');
// 获取input框
var input = document.querySelector('#text');
var timer = null;
// 给发射按钮绑定点击事件 DOM2
btn.addEventListener('click', send);
// 绑定键盘事件 DOM2
input.addEventListener('keyup', function (event) {
let e = event || window.event;
// 判断一下是否点了enter键，enter的keycode为13
if (e.keyCode == 13) {
// 直接调用发射按钮的点击事件
send();
// console.log("键盘事件绑定成功");
}
})
// 封装函数send
function send() {
// 1-1 设置一波随机颜色
var color = "#" + Math.random().toString(16).slice(-6);
// console.log(color);
// 1-2 设置一个随机高度
var randomY = parseInt(Math.random() * 400);
// 2 获取input的value值
var inputVal = input.value;
// span标签的内容就是input的value值
// 3 动态创建一个span标签
var span = document.createElement('span');
// console.log(span);
// 将 input框中 输入 的 值 赋给 span 作为内容
span.innerHTML = inputVal;
// 4 设置span的样式：
span.style.left = 1500 + 'px'; //初始randomX坐标在浏览器外，不在可视区
span.style.top = randomY + 'px';
span.style.color = color;
document.querySelector('#boxDom').appendChild(span);
// 每次开始运动前先清除一次计时器，否则越来越快
clearInterval(span.timer);
// 弹幕做匀速运动
span.timer = setInterval(function () {
// 第一种写法：（时间设置长一点）
// num -= 100;
// span.style.left = num + 'px';
// if(num <= -200){
// clearInterval(span.timer);
// span.remove();
// }
// 第二种写法：
span.style.left = span.offsetLeft - 10 + 'px';
if (span.offsetLeft <= -200) {
// 清除一次计时器
clearInterval(span.timer);
span.remove();
}
}, 30);
// 每一次点击成功后清空input框内数据
input.value = '';
}
第二种：
html结构同上：
script
// 获取发送按钮、input输入框
var body = document.querySelector('.boxDom');
var btnObj = document.querySelector('#btn');
// console.log(btnObj);
var textObj = document.querySelector('#text');
// 1 绑定点击事件 DOM0
btnObj.onclick = function () {
// console.log('点击事件绑定成功');
// 2-1 设置一波随机颜色 16进制 toString
var ranColor = '#' + Math.random().toString(16).slice(-6);
// console.log(ranColor);
// 2-2 设置一波随机高度
var ranTop = parseInt(Math.random() * 400);
// console.log(ranTop);
// 3 创建span设置css样式
var spanObj = document.createElement('span');
spanObj.style.color = ranColor;
spanObj.style.top = ranTop + 'px';
spanObj.style.left = 1500 + 'px';
// 将 input框中 输入 的 值 赋给 span 作为内容
var textObjval = textObj.value;
spanObj.innerHTML = textObjval;
// 将内容追加到body页面上
body.appendChild(spanObj);
// 弹幕做匀速运动
var timer = setInterval(() => {
// 第一种写法：（时间设置长一点）
// num -= 100;
// spanObj.style.left = num + 'px';
// if(num <= -200){
// clearInterval(spanObj.timer);
// spanObj.remove();
// }
// 第二种写法：
spanObj.style.left = spanObj.offsetLeft - 10 + 'px';
// offsetLeft,offsetTop:相对于最近的祖先定位元素
// console.log(spanObj.offsetLeft);
if (spanObj.offsetLeft <= -10) {
// 移除计时器
clearInterval(timer);
// 删除运动的节点
spanObj.remove();
}
}, 30);
// 每一次点击成功后清空input框内数据
// textObj.value = '';
}
// 绑定键盘事件 DOM2
textObj.addEventListener('keyup', function (event) {
let e = event || window.event;
// 判断一下是否点了enter键，enter的keycode为13
if (e.keyCode == 13) {
// 直接调用发射按钮的点击事件
btnObj.onclick();
// console.log("键盘事件绑定成功");
}
});
// 获取发送按钮、input输入框
var body = document.querySelector('.boxDom');
var btnObj = document.querySelector('#btn');
// console.log(btnObj);
var textObj = document.querySelector('#text');
// 1 绑定点击事件 DOM0
btnObj.onclick = function () {
// console.log('点击事件绑定成功');
// 2-1 设置一波随机颜色 16进制 toString
var ranColor = '#' + Math.random().toString(16).slice(-6);
// console.log(ranColor);
// 2-2 设置一波随机高度
var ranTop = parseInt(Math.random() * 400);
// console.log(ranTop);
// 3 创建span设置css样式
var spanObj = document.createElement('span');
spanObj.style.color = ranColor;
spanObj.style.top = ranTop + 'px';
spanObj.style.left = 1500 + 'px';
// 将 input框中 输入 的 值 赋给 span 作为内容
var textObjval = textObj.value;
spanObj.innerHTML = textObjval;
// 将内容追加到body页面上
body.appendChild(spanObj);
// 弹幕做匀速运动
var timer = setInterval(() => {
// 第一种写法：（时间设置长一点）
// num -= 100;
// spanObj.style.left = num + 'px';
// if(num <= -200){
// clearInterval(spanObj.timer);
// spanObj.remove();
// }
// 第二种写法：
spanObj.style.left = spanObj.offsetLeft - 10 + 'px';
// offsetLeft,offsetTop:相对于最近的祖先定位元素
// console.log(spanObj.offsetLeft);
if (spanObj.offsetLeft <= -10) {
// 移除计时器
clearInterval(timer);
// 删除运动的节点
spanObj.remove();
}
}, 30);
// 每一次点击成功后清空input框内数据
// textObj.value = '';
}
// 绑定键盘事件 DOM2
textObj.addEventListener('keyup', function (event) {
let e = event || window.event;
// 判断一下是否点了enter键，enter的keycode为13
if (e.keyCode == 13) {
// 直接调用发射按钮的点击事件
btnObj.onclick();
// console.log("键盘事件绑定成功");
}
});
扫一扫
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
