Javascript小案例-进度条(配置对象版)

news2024/11/25 2:34:09

gif演示图：
在这里插入图片描述
代码：
进度条(配置对象版).html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进度条（配置对象版）</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #333;
    }

    .progressbar {
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      height: 14px;
      line-height: 14px;
      font-size: 12px;
      color: white;
    }

    .progressbar .out {
      float: right;
      height: 14px;
      background-color: #999;
    }

    .progressbar .specif {
      position: absolute;
      height: 14px;
      left: 46%;
    }

    .title,
    .percent {
      display: inline-block;
    }

    .title {
      padding-right: 10px;
    }

    .progressbar .in {
      width: 0;
      height: 14px;
      background-color: #159e37;
    }
  </style>
</head>

<body>
  <div class="progressbar">
  </div>
  <script>
    /**
     * 进度处理函数，默认配置对象参数说明：
     * progressBarElement-进度条容器元素，默认获取 .progressbar修饰的标签
     * titleText-进度条标题文字，默认‘处理进度’
     * finishText-进度条满时的说明文字，默认‘处理完毕’
     * start-进度条初始值，默认0.0
     * total-进度条总值，默认50.0
     * maxRandomSpeed-进度条最大随机增长速度,默认1
     * interval-定时器周期，默认1000ms
     */
    function progress({progressBarElement=document.querySelector('.progressbar'), titleText='处理进度', finishText='处理完毕', start=0.0, total=50.0, maxRandomSpeed=1,interval=1000}) {
      if (progressBarElement != null) {
        progressBarElement.style.width = `${document.documentElement.clientWidth}px`

        // 创建进度条结构
        const outter = document.createElement('div')
        outter.classList.add('out')
        outter.style.width = progressBarElement.style.width

        const specif = document.createElement('div')
        specif.classList.add('specif')

        const title = document.createElement('span')
        title.classList.add('title')
        title.innerHTML = titleText


        const inner = document.createElement('div')
        inner.classList.add('in')

        const percent = document.createElement('div')
        percent.classList.add('percent')

        specif.appendChild(title)
        specif.appendChild(percent)
        outter.appendChild(inner)
        progressBarElement.appendChild(specif)
        progressBarElement.appendChild(outter)
        // 开启定时器模拟实时进度
        let timer = setInterval(() => {
          start += Math.random() * maxRandomSpeed
          let percentage = start / total
          // 实时进度
          inner.style.width = `${percentage * (outter.style.width.split('px')[0])}px`
          // 实时百分比 x.xx%
          percent.innerHTML = `${(percentage * 100).toFixed(2)}%`
          if (start >= total) {
            clearInterval(timer)
            percent.innerHTML = finishText
          }
        }, interval)
      }
    }

    // 以【各种配置对象】为参数调用进度条处理函数

    // 1 、使用【完整自定义配置对象】进行调用
    progress({
      progressBarElement: document.querySelector('.progressbar'),
      titleText:'下载进度',
      finishText:'下载完毕',
      start:0.0,
      total:200.0,
      maxRandomSpeed:10,
      interval:500
    })

    // 2 、使用【部分自定义对象】进行调用
    // progress({
    //   start:0.0,
    //   total:100.0,
    //   maxRandomSpeed:10
    // })

    // 3 、使用【默认配置对象】进行调用
    // progress({})
  </script>
</body>

</html>