简易弹幕

最新推荐文章于 2020-06-05 16:03:42 发布

哼,小呀么小胖子

最新推荐文章于 2020-06-05 16:03:42 发布

阅读量112

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102525634

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

最终效果
在这里插入图片描述
所用知识点:
DOM元素
增:

document.createElement() //创建元素
parent.appendChild() //尾部插入
parent.insertBefore(new,old) //从元素前插入
parent.innerHTML=’’

删:

ele.remove() //删除自己
parent.removeChild(Child) //删除子元素
parent.innerHTML=’’

修改:
对内容的修改表单: ele.value
非表单: ele.innerText=’ ’ (结果只为文本)
ele.innerHTML=’ ’ (结果包含标签)

属性固有属性(元素对象的属性)
ele.attribute (ele.src)
ele[attribute] (ele[attribute])
两者之间的区别:.后面只能为属性值,不能为字符串
[]内的attribute可以为变量,而.后不可以
当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用
classList得到class的集合,其包含3个属性
ele.classList.add();
ele.classList.remove();
ele.classList.replace(old.new)

自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)
以下三种方法既可以操作固有属性,又可以操作自定义属性

ele.getAttribute(属性名)
ele.setAttribute(属性名,属性值) //本身自带新增功能
ele.removeAttribute(属性名)

元素样式宽,高 width / height
元素内容宽,高 ele.clientWidth / ele.clientHeight
padding+width / padding+height
实际宽,高 ele.offsetWidth /ele.offsetHeight
padding+border+width /padding+border+height
相对父元素的距离 ele.offsetTop / ele.offsetLeft

定时器
setInterval(function(){
count();
},1000)
每隔1000ms执行一次count函数
clearInterval() 停止setInterval方法

代码:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>大作业_弹幕</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .wrapBox {
      width: 800px;
      height: 550px;
      border: 1px solid #000;
      margin: 50px auto 0;
    }

    .videoBox {
      height: 500px;
      position: relative;
      overflow: hidden;
    }

    .videoBox img {
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
    }

    .danmuSend {
      display: flex;
      height: 50px;
    }

    #content {
      flex: 1;
    }

    #send {
      width: 100px;
    }

    .danmu {
      color: #f00;
      font-size: 20px;
      position: absolute;
      left: 800px;
      top: 0;
      white-space: nowrap;
    }

    .danmu img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="wrapBox">
    <div class="videoBox">
      <img src="img/t1.jpg" />
      <span class="danmu">我是弹幕</span>
    </div>
    <div class="danmuSend">
      <input id="content" type="text">
      <button id="send">发送</button>
    </div>
  </div>
</body>
<script>

  var oSend = document.querySelector('#send');
  var oContent = document.querySelector('#content');
  var oVideoBox = document.querySelector('.videoBox');
  //点击发送按钮时触发此事件
  oSend.onclick = function () {
    //获取文本框输入的内容
    var content = oContent.value;
    createDanmu(content)
  }

  function createDanmu(content) { // 创建弹幕 =>  移动  => 消失
    //新建一个span类型的标签
    var oSpan = document.createElement('span');
    //将获取的输入的内容传入标签
    oSpan.innerHTML = '<img src="img/t2.jpg">' + content;
    //添加其class属性,对头像图片进行样式修改
    oSpan.classList.add('danmu');
    //设置其字体颜色属性随机
    oSpan.style.color = randomColor();
    //在oVideoBox所代表的的标签内添加该元素
    oVideoBox.appendChild(oSpan);
    //使该新标签出现的位置随机
    oSpan.style.top = Math.round(Math.random() * (oVideoBox.clientHeight - oSpan.offsetHeight)) + 'px';
    //设置定时器,使其位置改变
    var timer = setInterval(function () {
    // 初始位置
    var start = oSpan.offsetLeft;
    // 偏移量
    start -= 10;
    //先判断,使其向左移动相对父元素的距离最终小于其右边时移除该元素,并清除该定时器
      if (start < -oSpan.offsetWidth) { 
        clearInterval(timer);
        oSpan.remove();
      }
      // 赋值新位置
      oSpan.style.left = start + 'px';
    }, 100);
  }
  //用来生成随机颜色
  function randomColor() {
    return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
  }
</script>
</html>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易弹幕

最终效果所用知识点:DOM元素增:document.createElement() //创建元素parent.appendChild() //尾部插入parent.insertBefore(new,old) //从元素前插入parent.innerHTML=’’删:ele.remove() //删除自己parent.removeChild(Child) //删除子...
复制链接

扫一扫