js题目8

最新推荐文章于 2025-05-28 19:34:53 发布

3283478051Sun

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量109

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145680109

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     * {
            margin: 0;
            padding: 0;
        }

        #screen {
            width: 100%;
            height: 900px;
            position: absolute;
            overflow: hidden;
        }

        #content {
            width: 90%;
            height: 96px;
            float: left;
            font-size: 50px;
            position: relative;
            bottom: 0;
        }

        #bt {
            width: 100%;
            height: 100px;
            text-align: center;
            float: left;
            font-size: 30px;
            position: relative;
            bottom: 0;
        }

        .bottom {
            width: 100%;
            height: 200px;
            position: relative;
            top: 700px;
        }
        #new{
            width: 100%;
            height: 800px;
            display: none;
            font-size: 50px;
            z-index: 1000;
        }

  </style>
</head>
<body>
  <div>
    <input type="text" id="new" placeholder="请输入弹幕">
    <button id="bt">发送</button>
    <div id="screen">
      <div class="bottom">
        <input type="text" id="content" placeholder="请输入弹幕">
      </div>
    </div>
</div>
<script>
  let screen = document.getElementById('screen')
  let danmu = document.getElementById('content')
  let send = document.getElementById('bt')
  let new_block = document.getElementById('new')
  danmu.addEventListener('click', function () {
      new_block.style.display = 'block'
      screen.style.display = 'none'
  });
  function line(message) {
      //生成随机字体
      const FontSize = Math.floor((Math.random() * 100) + 20)
      //生成随机颜色
      const letters = "0123456789ABCDEF"
      let color = '#'
      for (let i = 0; i < 6; i++) {
          color = color + letters[Math.floor(Math.random() * 16)];
      }
      let startX = 1699
      //生成垂直高度
      const distance_top = Math.random() * 680
      //生成弹幕条
      let danmu_line = document.createElement('div')
      danmu_line.style.position = 'absolute'
      danmu_line.textContent = message
      danmu_line.style.top = distance_top + 'px'
      danmu_line.style.left = startX + 'px'
      danmu_line.style.fontSize = FontSize + 'px'
      danmu_line.style.color = color
      screen.appendChild(danmu_line);
      const speed = 10
      let internal = setInterval(function () {
          startX = startX - speed
          danmu_line.style.left = startX + 'px'
          if (startX <= -danmu_line.offsetWidth) {
              clearInterval(internal)
              screen.removeChild(danmu_line)
          }
      }, 16);

  }

  send.addEventListener('click', function () {
      const message = new_block.value.trim()
      if (message !== '') {
          line(message)
          new_block.value = ''
          new_block.style.display = 'none'
          screen.style.display = 'block'
      }
  })
  window.onload = function() {  
let screenElement = document.getElementById('screen');  
console.log(screenElement.clientWidth); // 输出#screen元素的宽度到控制台  
// 其他代码...  
};
</script>

</body>
</html>

屏幕录制 2025-02-17 123309