主页 / 问题 / 1594626
Accepted
Саша
Asked:2024-09-23 17:44:27 +0000 UTC2024-09-23 17:44:27 +0000 UTC

JS创建进度条，在页面显示进度

  • 772

我正在 js 课程中进行练习，根据作业，我需要使用时间参数创建一个进度函数，该函数会在给定时间内更改 div 的大小，使用scaleX，在页面上显示百分比。我现在这样做了，但是当我添加 div 的百分比时，它开始填充得更快并且超出了页面。告诉我出了什么问题。

/* Добавлено для визуализации в сниппете */
const div = document.querySelector('.progress-bar');
const timeEl = document.getElementById('time');
/* ===================================== */
  
function progress(time) {
  let startPoint = 0;
  div.style.transform = 'scaleX(0)';
  let speed = time / 31;
  let timer = setInterval(() => {
    if (startPoint > 31) {
      clearInterval(timer);
    } else {
      div.style.transform = `scaleX(${startPoint})`;
      timeEl.textContent = `${(startPoint / 31) * 100} %`;
    }

    startPoint++;
  }, speed);
}

/* запуск */ 
progress(time); 
*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(227, 227, 207);
}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.progress-bar {
  max-width: 500px;
  height: 20px;
  padding: 5px;
  background-color: rgb(128, 128, 195);
  transition: transform ease-in-out .5s;
  transform-origin: left;
}
<div class="container">
  <div class="progress-bar"></div>
  <span id="time"></span>
</div>

javascript

1 个回答

  1. Best Answer

    scaleX为了使对象具有设定的尺寸，它必须不超过 1。代码应该是这样的：div.style.transform = scaleX(${startPoint / 31});但我会关注用于构建进度的想法。它使用像 inlineSize 这样的属性

    /* Добавлено для визуализации в сниппете */
const div = document.querySelector('.progress-bar');
const bar = document.querySelector('.bar');
const timeEl = document.getElementById('time');
/* ===================================== */
  
function progress(time) {
  let startPoint = 0;
  bar.style.inlineSize = '0%';
  let speed = time / 31;
  let timer = setInterval(() => {
    if (startPoint > 31) {
      clearInterval(timer);
    } else {
      //div.style.transform = `scaleX(${startPoint / 31})`;
      bar.style.inlineSize = `${(startPoint / 31) * 100}%`;
      timeEl.textContent = `${parseInt((startPoint / 31) * 100)}%`;
    }

    startPoint++;
  }, speed);
}

/* запуск */ 
document.querySelector('button').addEventListener('click', (e) => {
  progress(10000); 
});
    *,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background-color: rgb(227, 227, 207);
}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.progress-bar {
  min-width: 500px;
  height: 20px;
  padding: 5px;
  box-shadow: 0 0 1px #000;
}

.bar {
  width: 100%;
  height: 100%;
  background-color: rgb(128, 128, 195);
  inline-size: 0%;
}
    <div class="container">
  <div class="progress-bar"><div class="bar"></div></div>
  <span id="time">0%</span>
  <button>ПУСК</button>
</div>

    • 2

相关问题