原生JavaScript写一个简简单单的弹幕

最新推荐文章于 2023-04-07 10:11:41 发布

小李叭叭叭

最新推荐文章于 2023-04-07 10:11:41 发布

阅读量207

点赞数

分类专栏： JavaScript学习之路文章标签： javascript css html js

本文链接：https://blog.csdn.net/qq_42249813/article/details/118089432

版权

HTML CSS JavaScript 弹幕效果动态效果

关键词由CSDN通过智能技术生成

JavaScript学习之路专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天闲着无聊突然想写一个弹幕发射效果，复杂的也不会写就利用setInterval简单写一个吧
效果如下
在这里插入图片描述

先把框架写出来，简简单单初学者肯定也会写。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      text-align: center;
      background: #bdc3c7;
    }
    #b_g {
      height: 500px;
      width: 500px;
      margin: 0 auto;
      background: wheat;
      position: relative;
      overflow: hidden;
    }
    span {

      /* 为了防止汉字到最后的边上会自动换行 */
      white-space: nowrap; 
      z-index: 100;
    }
  </style>
</head>
<body>
  <h1>弹幕区域</h1>
  <div id="b_g"></div>
  <input type="text" class="txt form-control">
  <input type="button" value="发射" class="inp " type="submit">

</body>

</html>

接着写JS部分

<script>
 //获取节点不用多说
  let bg = document.querySelector('#b_g');
  let txt = document.querySelector('.txt');
  let inp = document.querySelector('.inp');
  //想弄个随机弹幕颜色所以加了一个数组里面存了一些颜色， 自己可以增加或者修改
  let ColorArr = ['#3498db', '#16a085', '#eccc68', '#ff7f50', '#ff6b81', '#a4b0be', '#57606f']
  //给发射按钮加个点击事件
  inp.onclick = function () {
  	//先随机获取颜色数组里面的下标（索引）
    ColorArr_random = Math.floor(Math.random() * ColorArr.length)
    //创建span节点
    let p = document.createElement('span');
    //获取文本框的内容给span使用
    p.innerHTML = txt.value
    //然后就是我们的随机颜色
    p.style.color = ColorArr[ColorArr_random]
    //定位没什么好说的
    p.style.position = 'absolute'
    p.style.left = bg.offsetWidth + 'px' //offsetWidth 是自动获取宽度，在这获取了背景块的宽度，直接让生成的span位置放在最右侧
    p.style.top = Math.random() * 490 + 'px' //随机生成的高度
    bg.appendChild(p)  //将创建的节点添加到背景块里面

    //弹幕自动移动
    let move = setInterval(function () {
    	//每次位置减少2 自己可以修改
      p.style.left = parseInt(p.style.left) - 2 + 'px'
      //如果位置减去弹幕长度小于0 即超出了背景块就删掉
      if ((parseInt(p.style.left) + p.offsetWidth) < 0) {
        bg.removeChild(p);
        clearInterval(move)
      }
    }, 10)
    txt.value = ''

  }
</script>

完整的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      text-align: center;
      background: #bdc3c7;
    }
    #b_g {
      height: 500px;
      width: 500px;
      margin: 0 auto;
      background: wheat;
      position: relative;
      overflow: hidden;
    }
    span {

      /* 为了防止汉字到最后的边上会自动换行 */
      white-space: nowrap; 
      z-index: 100;
    }
  </style>
</head>
<body>
  <h1>弹幕区域</h1>
  <div id="b_g"></div>
  <input type="text" class="txt form-control">
  <input type="button" value="发射" class="inp " type="submit">

</body>

</html>
<script>
 //获取节点不用多说
  let bg = document.querySelector('#b_g');
  let txt = document.querySelector('.txt');
  let inp = document.querySelector('.inp');
  //想弄个随机弹幕颜色所以加了一个数组里面存了一些颜色， 自己可以增加或者修改
  let ColorArr = ['#3498db', '#16a085', '#eccc68', '#ff7f50', '#ff6b81', '#a4b0be', '#57606f']
  //给发射按钮加个点击事件
  inp.onclick = function () {
  	//先随机获取颜色数组里面的下标（索引）
    ColorArr_random = Math.floor(Math.random() * ColorArr.length)
    //创建span节点
    let p = document.createElement('span');
    //获取文本框的内容给span使用
    p.innerHTML = txt.value
    //然后就是我们的随机颜色
    p.style.color = ColorArr[ColorArr_random]
    //定位没什么好说的
    p.style.position = 'absolute'
    p.style.left = bg.offsetWidth + 'px' //offsetWidth 是自动获取宽度，在这获取了背景块的宽度，直接让生成的span位置放在最右侧
    p.style.top = Math.random() * 490 + 'px' //随机生成的高度
    bg.appendChild(p)  //将创建的节点添加到背景块里面

    //弹幕自动移动
    let move = setInterval(function () {
    	//每次位置减少2 自己可以修改
      p.style.left = parseInt(p.style.left) - 2 + 'px'
      //如果位置减去弹幕长度小于0 即超出了背景块就删掉
      if ((parseInt(p.style.left) + p.offsetWidth) < 0) {
        bg.removeChild(p);
        clearInterval(move)
      }
    }, 10)
    txt.value = ''

  }
</script>
</html>

小李叭叭叭

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript写一个简简单单的弹幕

今天闲着无聊突然想写一个弹幕发射效果，复杂的也不会写就利用setInterval简单写一个吧效果如下先把框架写出来，简简单单初学者肯定也会写。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫

专栏目录