1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；⒉.底部中间有一个发送功能，可以发送新的弹幕； 3.底部的发送部分可以向下收起和弹出。

mttp02

已于 2023-01-17 23:12:31 修改

阅读量45

点赞数

文章标签： css html 前端

于 2023-01-17 22:40:30 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128721503

版权

1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕;⒉.底部中间有一个发送功能，可以发送新的弹幕;
3.底部的发送部分可以向下收起和弹出。

<!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>
        
  
      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;
        position: fixed;
        bottom: 0px;
        
      }
     .idDom:hover .content{
        visibility: visible;
        display: block;
      }
      .content {
        display: inline-block;
        width: 430px;
        height: 40px;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        visibility: hidden;
      }
  
      .title {
        display: inline;
        font-size: 4em;
        vertical-align: bottom;
        color:#000;
      }
  
      .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>
    </style>
</head>
    <body>
        <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>
      
      <script>
      // 获取元素
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
  
    span.style.right = 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})`
  

    let dis = boxDom.clientWidth
    // setInterval(需要执行的函数，时间间隔)
    let tid = setInterval(function() {
        dis -= 1
        span.style.right = dis + 'px'
        // 移动到目标位置，清除定时器
        if (dis <script -span.clientWidth) {
            clearInterval(tid)
            // 将当前的span移除
            span.remove()
        }
    }, 4)
    boxDom.insertBefore(span, boxDom.children[0])
})
</script>
     
</div>
</body>
</html>