用JavaScript技术实现弹幕效果

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">html,body {margin: 0px;padding: 0px;width: 100%;height: 100%;font-family: '微软雅黑';font-size: 62.5%;}.boxDom {width: 100%;height: 100%;position: relative;overflow: hidden;}.idDom {width: 100%;height: 100px;background: #666;position: fixed;bottom: 0px;}.content {display: inline-block;width: 430px;height: 40px;position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;margin: auto;}.title {display: inline;font-size: 4em;vertical-align: bottom;color: #fff;}.text {border: none;width: 300px;height: 30px;border-radius: 5px;font-size: 2.4em;}.btn {width: 60px;height: 30px;background: #f90000;border: none;color: #fff;font-size: 2.4em;}span {/* width: 300px; *//* height: 40px; */position: absolute;overflow: hidden;color: #000;font-size: 10em;line-height: 1.5em;cursor: pointer;white-space: nowrap;transition: left 5s linear;}</style></head><body><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><script src="./js/getColor.js"></script><script>// 获取元素let btn = document.querySelector('#btn')let text = document.querySelector('#text')let boxDom = document.querySelector('#boxDom')// 为按钮绑定事件btn.addEventListener('click', function() {// 获取用户输入内容// 表单元素input的值的获取是使用valuelet content = text.value// 创建一个元素// createElement：创建元素let span = document.createElement('span')span.innerText = content// 添加到指定容器中// insertBefore：将指定的元素插入到参照元素的前面：父容器.insertBefore(子元素，参照元素)// appendChild:将元素追加到所有子元素的最后: 父容器.appendChild(子元素)// insertBefore：一定传入两个参数boxDom.insertBefore(span, boxDom.children[0])// 为元素设置样式// clientWidth:获取元素的实际宽度// 设置left值为元素右侧外span.style.left = boxDom.clientWidth + 'px'// 设置top为上半区随机位置span.style.top =parseInt((Math.random() * boxDom.clientHeight) / 2) + 'px'// span.style.color = setColor()span.style.color = `rgb(${Math.random() * 256},${Math.random() *256},${Math.random() * 256})`// 让元素动起来 -- 配合过渡样式setTimeout(() => {span.style.left = -span.clientWidth + 'px'}, 200)// 距停止位置的距离// let dis = boxDom.clientWidth// setInterval(需要执行的函数，时间间隔)// let tid = setInterval(function() {//   dis -= 1//   span.style.left = dis + 'px'//   // 移动到目标位置，清除定时器//   if (dis < -span.clientWidth) {//     clearInterval(tid)//     // 将当前的span移除//     span.remove()//   }// }, 4)})</script></body></html>

// 定义16进制的颜色值
let colors = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'
]
// 定义一个函数
function setColor() {// 颜色值，默认带#let str = '#'// 颜色是6位的16进制数，所以循环6次for (let i = 0; i < 6; i++) {// 生成一个随机索引let index = parseInt(Math.random() * colors.length)// 将对应的颜色值拼接到字符串str += colors[index]}// 返回return str
}

用JavaScript技术实现弹幕效果相关推荐

flutter 弹幕插件_Flutter 实现虎牙/斗鱼弹幕效果 | 秒速技术
老孟导读:用Flutter实现弹幕功能,轻松实现虎牙.斗鱼的弹幕效果. 先来一张效果图: 实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的 ...
转在b/s开发中经常用到的javaScript技术
在b/s开发中经常用到的javaScript技术一.验证类 1.数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于i ...
html弹幕效果加入视频,JS实现的视频弹幕效果示例
本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: 斗鱼弹幕 html,body{font-size:10px;overflow:hidden;margin:0;padding:0 ...
java 弹幕原理_Flutter 实现虎牙/斗鱼弹幕效果
老孟导读:用Flutter实现弹幕功能,轻松实现虎牙.斗鱼的弹幕效果. 先来一张效果图: 实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的 ...
android 图文弹幕重叠,Android双重SurfaceView实现弹幕效果
本文实例为大家分享了Android双重SurfaceView实现弹幕效果的具体代码,供大家参考,具体内容如下页面布局首先是XML的layout布局,这里的总的父布局是一个FrameLayout用于 ...
3种方法实现弹幕效果
本文实现弹幕效果的三种方法:1.Canvas实现 2.Jquery实现 3.js原生实现 1.Canvas弹幕实现借鉴于:https://segmentfault.com/a/11900000117 ...
java实现弹幕效果_css3实现蒙版弹幕功能
摘要:这篇CSS3栏目下的"css3实现蒙版弹幕功能",介绍的技术点是"CSS3.蒙版.功能.弹幕.实现",希望对大家开发技术学习和问题解决有帮助. 最近在b站 ...
Android弹幕功能实现，模仿斗鱼直播的弹幕效果
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索郭 ...
JavaScript 技术知识
当今世界,JavaScript已经成为了Web开发的必备技能之一.在本文中,我将分享一些有关JavaScript的技术知识,希望对读者有所帮助. ES6语法 ES6是ECMAScript定义的第六个版 ...

用JavaScript技术实现弹幕效果

用JavaScript技术实现弹幕效果相关推荐

最新文章

热门文章