弹幕改进

最新推荐文章于 2024-04-27 19:01:09 发布

哼,小呀么小胖子

最新推荐文章于 2024-04-27 19:01:09 发布

阅读量131

点赞数

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

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

版权

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

45 篇文章 0 订阅

订阅专栏

与之前相比添加了暂停和开始和隔一段时间才能发送功能

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 800px;
      height: 500px;
      margin: 40px auto;
    }

    .box_top {
      width: 800px;
      height: 465px;
      overflow: hidden;
      position: relative;
    }

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

    .box_bottom {
      width: 800px;
      height: 35px;
    }

    .box_bottom .content {
      width: 696px;
      line-height: 35px;
      float: left;
      font-size: 18px;
    }

    .box_bottom button {
      width: 100px;
      line-height: 35px;
      float: right;
    }

    span {
      position: absolute;
      white-space: nowrap;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <button class="pause">暂停</button>
  <button class="start">开始</button>
  <div class="box">
    <div class="box_top">
      <img src="../img/t4.jpg" alt="">
    </div>
    <div class="box_bottom">
      <input class="content">
      <button id="btn">发送</button>
    </div>
  </div>
</body>
<script>
  var box_top = document.getElementsByClassName('box_top')[0];
  var content = document.getElementsByClassName("content")[0];
  var pause = document.getElementsByClassName("pause")[0];
  var start = document.getElementsByClassName("start")[0];
  var btn = document.getElementById('btn')
  var timer;
  var timer1;
  var count =3;
  btn.onclick = function () {
    var creatSpan = document.createElement("span");
    box_top.appendChild(creatSpan)
    creatSpan.innerHTML = content.value;
    var maxHeight = box_top.clientHeight - creatSpan.clientHeight;
    var rightStart = creatSpan.clientWidth;
    creatSpan.style.right = -rightStart + 'px';
    creatSpan.style.color = `rgb(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)})`
    var randomHeight = Math.round(Math.random() * maxHeight);
    creatSpan.style.top = randomHeight + 'px';
    move(creatSpan, "left", -rightStart);
    getDisable(btn);
  }

  pause.onclick = function () {
    if(count){
       clearInterval(timer1)
       btn.innerHTML = '发送';
       count =3;
       btn.disabled = true;
    }
    var spansList = document.querySelectorAll('span');
    for (let i = 0; i < spansList.length; i++) {
      clearInterval(spansList[i].timer);
    }
  }

  start.onclick = function () {
    btn.disabled = false;
    var spansList = document.querySelectorAll('span');
    for (let i = 0; i < spansList.length; i++) {
      clearInterval(spansList[i].timer);
      var rightStart = spansList[i].clientWidth;
      move(spansList[i], "left", -rightStart);
    }
  }


  function move(ele, attr, end) {
    var speed = 0;
    var start = parseFloat(getStyle(ele, attr));
    console.log(start)
    ele.timer = setInterval(function () {
      end = parseFloat(end)
      speed = (end - start) / 20;
      console.log(speed)
      ele.style[attr] = parseFloat(getStyle(ele, attr)) + speed + 'px';
      if (parseFloat(getStyle(ele, attr)) <= end) {
        ele.style[attr] = end + 'px';
        clearInterval(ele.timer);
      }
    },200)
  }

  
  function getDisable(ele) {
    ele.disabled = true;
    timer1 = setInterval(function () {
      count--;
      ele.innerHTML = `还有${count}秒可发送`
      if (count == 0) {
        ele.disabled = false;
        ele.innerHTML = '发送';
        count =3;
        clearInterval(timer1)
      }
    }, 1000)
  }


  function getStyle(ele, attr) {
    if (window.getComputedStyle) {
      return getComputedStyle(ele)[attr];
    } else {
      return ele.currentStyle[attr];
    }
  }
</script>

</html>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹幕改进

与之前相比添加了暂停和开始和隔一段时间才能发送功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
复制链接

扫一扫

专栏目录