Форум

Lefseq · #1 (**permalink**) 28.02.2020, 20:30

Привет. Подскажите, как сделать следующее... Имеется прогресс бар, который за указанное время (3 секунды) отрабатывает лишь один раз. Мне же нужно чтобы он отработал пять раз (например): сначала 3 секунды, затем 5 секунд, 9 секунд, 4 секунды, и 7 секунд. Как это можно сделать?

<progress id="user-progress" value="0" max="100"></progress>

function userProgress(time){
var start = 0;
var time = Math.round(time*1000/100);
var progressElement = document.getElementById('user-progress');
var intervalId = setInterval(function(){
    if (start>100) {
	    clearInterval(intervalId);
	}
	else {
	  progressElement.value = start;
	}
	start++;
}, time);
}
userProgress(3);

Nexus · #2 (**permalink**) 28.02.2020, 21:03

<progress id="user-progress" value="0" max="100"></progress>
<script>
    function userProgress(time) {
        var start = 0;
        var time = Math.round(time * 1000 / 100);
        var progressElement = document.getElementById('user-progress');
        
        return new Promise(function (resolve) {
            var intervalId = setInterval(function() {
                if (start++ > 100) {
                    clearInterval(intervalId);
                    resolve();
                } else {
                    progressElement.value = start;
                }
            }, time);
        });
    }

    userProgress(3).then(function () {
        return userProgress(5);
    }).then(function () {
        return userProgress(9);
    });
</script>

рони · #3 (**permalink**) 28.02.2020, 23:36

Lefseq,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  progress {
      width: 300px;
      font-size: .6em;
      height: 12px;
      border: none;
      border-radius: 8px;
      background-color: #a9a9a9;
      line-height: 12px;
      padding: 2px 1px;
  }
  progress::-webkit-progress-bar {
      height: 12px;
      font-size: .6em;
      border: 1px solid  transparent;
      border-radius: 8px;
      background-color: #a9a9a9;
      line-height: 8px;
  }
  progress::-webkit-progress-value {
      height: 8px;
      background-color: var(--color, #f00);
      border-radius: 5px;
  }
  progress::-moz-progress-bar {
      height: 8px;
      background-color: var(--color, #f00);
      border-radius: 5px;
  }
  </style>
  <script>
  </script>
</head>
<body>
<progress id="user-progress" value="0" max="100"></progress>
  <script>
document.addEventListener( "DOMContentLoaded" , function() {
  const animate = ({timing, draw, duration, resolve}) => {
  let start = performance.now();
  const loop = time => {
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;
    let progress = timing(timeFraction);
    draw(progress);
    if (timeFraction < 1) {
      requestAnimationFrame(loop);
    }
    else resolve();
  };
  requestAnimationFrame(loop);
};
  function inOutQuad(n){
    n *= 2;
    if (n < 1) return 0.5 * n * n;
    return - 0.5 * (--n * (n - 2) - 1);
  };
  function easeOutExpo( t ) {
    if( t === 1 ) {
        return 1;
    }
    return ( -Math.pow( 2, -10 * t ) + 1 );
 }
 function linear(t)
 {
    return t;
 }
const data = [ 3, 5, 9, 4, 7];
const progressElement = document.getElementById('user-progress');
const draw = progress => progressElement.value = Math.round(progress * 100) ;
data.reduce((promise, sec) => {
  return promise.then(() => new Promise((resolve, reject) => {
  const color = '#' + ('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);
  progressElement.style.setProperty("--color", color);
  const option = {timing : inOutQuad, draw, duration : sec * 1000, resolve};
  animate(option);
      }));
}, Promise.resolve())
    });
 </script>
</body>
</html>

Lefseq · #4 (**permalink**) 29.02.2020, 13:14

Nexus,
рони,
Спасибо

Форум

Справочник

Discord чат

Курсы javascript