JS实现弹幕小案例

本文实例为大家分享了JS实现弹幕小案例的具体代码,供大家参考,具体内容如下

效果图:

步骤分析:

1、收集用户输入内容,根据内容创建一个标签--span,追加到某个容器中

2、为元素设置位置

  • left:右侧--大容器外面
  • top:上半区

3、通过样式设置来实现元素的动画,也可以通过定时器的方式实现动画

4、细节

  • 文本颜色随机
  • span动画结束之后应该进行自动的清除

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>

css代码:

<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: 4em;
        line-height: 1.5em;
        cursor: pointer;
        white-space: nowrap;
      }
</style>

JS代码:

// 获取元素
let btn = document.querySelector('#btn')
let text = document.querySelector('#text')
let boxDom = document.querySelector('#boxDom')
 
// 为按钮绑定事件
btn.addEventListener('click', function() {
    // 获取用户输入内容
    // 表单元素input的值的获取是使用value
    let content = text.value
    // trim:去除左右空格
    if (content.trim().length == 0) {
        alert('请输入一个内容再发弹幕')
        return
    }
    // 创建一个元素
    // createElement:创建元素
    let span = document.createElement('span')
    span.innerText = content
 
    // 为元素设置样式
    // 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() * 255},${Math.random() *
        255},${Math.random() * 255})`
 
    // 让元素动起来 -- 配合过渡样式
    // 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)
 
    // 添加到指定容器中
    // insertBefore:将指定的元素插入到参照元素的前面:父容器.insertBefore(子元素,参照元素)
    // appendChild:将元素追加到所有子元素的最后: 父容器.appendChild(子元素)
    // insertBefore:一定传入两个参数
    boxDom.insertBefore(span, boxDom.children[0])
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js实现简易弹幕系统

    本文实例为大家分享了原生js实现弹幕效果的具体代码,供大家参考,具体内容如下 实现思路 1.先写好静态页面框架 <div id='father'> <div id="top"> <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video> <!-- controls显示标准的视频控件 autoplay 视频自动播放

  • javascript实现视频弹幕效果(两个版本)

    本文实例为大家分享了javascript实现视频弹幕效果的具体代码,供大家参考,具体内容如下 基础版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color:

  • 一篇文章教你学会js实现弹幕效果

    目录 新建一个html文件: 建好html文件,搞出初始模版 HTML添加 CSS填充 js逻辑代码 动画效果 下面是弹幕效果 : 相信小伙伴们都看过了,那么它实现的原理是什么呢,那么我们前端怎么用我们web技术去实现呢?? 新建一个html文件: 哈哈哈,大家别像我一样用中文命名. 中文命名是不合规范的,行走江湖,大佬们看见你的中文命名会笑话你的. 上图中,我们引入了jquery插件,没错我们用jq写,回归原始(找不到cdn链接的小伙伴可以百度bootcdn,在里面搜索jquery).并且取了

  • 原生js实现弹幕效果

    本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生js实现弹幕效果</title> <style> * { padding:0; margin:0; } .all { width:600px; height:400px; backgr

  • javascript实现弹幕墙效果

    刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙. 步骤如下: 1.编写HTML代码: 创建一个弹幕显示墙,以及两个按钮,分别为"发送"和"清屏",并在文本框中设置placeholder为"说点什么吧?"以提示用户在此输入弹幕信息. <body> <div class="con"> <div id="screen"> <div class=

  • 简单实现JavaScript弹幕效果

    不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&

  • JavaScript直播评论发弹幕切图功能点集合效果代码

    一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl

  • 基于JavaScript实现弹幕特效

    本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&

  • JS实现视频弹幕效果

    使用ES6的模块化开发及观察者模式来实现.观察者模式有很多种形式,这里是使用"注册-通知-撤销注册"的形式.TimeManager类可以返回一个单例,每一条弹幕作为一个观察者,注册到TimeManager类的单例的set表中,当单例的set中有数据时,被观察者状态被改变,执行动画,并通知所有观察者进行update状态更新.弹幕移动超过视频宽度时,从TimeManager中注销.当TimeManager单例的set表中所有被观察弹幕都注销时,setInterval停止执行. 1.Bull

  • JS实现的视频弹幕效果示例

    本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼

随机推荐