не работает Progress bar в firefox

130
08 мая 2021, 22:30

Всем привет! Появилась такая проблема. У меня не работает progress bar в firefox. В остальных браузерах пашет. Задается значение с помощью JS. Понять не могу из-за чего не работает…

html:

    <div id="skils">
  <h1 id="skil">Статистика Ильи</h1>
  <h2 id="html">Html:</h2>
  <progress value="0" max="100" id="progress"></progress>
  <h2 id="CSS">CSS:</h2>
  <progress value="0" max="100" id="progress2"></progress>
  <h2 id="SCSS">SCSS:</h2>
  <progress value="0" max="100" id="progress3"></progress>
  <h2 id="JS">JS:</h2>
  <progress value="0" max="100" id="progress4"></progress>
  <h2 id="PHP">PHP:</h2>
  <progress value="0" max="100" id="progress5"></progress>
  <h2 id="PDO">MYSLQ:</h2>
  <progress value="0" max="100" id="progress6"></progress>
  <h2 id="WORD">WORDPRESS:</h2>
  <progress value="0" max="100" id="progress7"></progress>
  <h2 id="DESIGN">WEB-DESIGN:</h2>
  <h2 id="lv">10LV</h2>
  <h2 id="Internet">ПОИСК РЕШЕНИЯ ПРОБЛЕМЫ:</h2>
  <h2 id="lv2">50LV</h2>
  <i class="fas fa-times" id="close" onclick="Krestik()"style="color:black;" onmouseover="this.style.color='#969696';" onmouseout="this.style.color='black';"></i>
</div>

css:

 #html {
  font-family: "Open Sans", sans-serif;
  position: absolute;
  top: 1.3em;
  left: 0.1em; }
#progress2 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 6.1em; }
#CSS {
  font-family: "Open Sans", sans-serif;
  top: -0.1em;
  position: relative;
  left: 0.1em; }
#SCSS {
  font-family: "Open Sans", sans-serif;
  top: -0.9em;
  position: relative;
  left: 0.1em; }
#progress3 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 8.1em;
  left: 4.1em; }
#JS {
  font-family: "Open Sans", sans-serif;
  top: -1.7em;
  position: relative;
  left: 0.3em; }
#progress4 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 10.4em;
  left: 2.5em; }
#PHP {
  font-family: "Open Sans", sans-serif;
  top: -2.3em;
  position: relative;
  left: 0.1em; }
#progress5 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 12.65em; }
#PDO {
  font-family: "Open Sans", sans-serif;
  top: -3em;
  position: relative;
  left: 0.1em; }
#progress6 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 14.9em;
  left: 6em; }
#WORD {
  font-family: "Open Sans", sans-serif;
  top: -3.5em;
  position: relative;
  left: 0.1em; }
#progress7 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 17.4em;
  left: 10em; }
#DESIGN {
  font-family: "Open Sans", sans-serif;
  top: -4.1em;
  position: relative;
  left: 0.1em; }
#progress8 {
  border-radius: 10px;
  border: 0;
  position: absolute;
  top: 4em;
  left: 4em;
  top: 19.9em;
  left: 10em; }
#lv {
  font-family: "Open Sans", sans-serif;
  top: -6.25em;
  position: relative;
  left: 6.7em; }
#Internet {
  font-family: "Open Sans", sans-serif;
  top: -7.1em;
  position: relative;
  left: 0.1em; }
#lv2 {
  font-family: "Open Sans", sans-serif;
  top: -9.3em;
  position: relative;
  left: 15.3em; }

JS:

    var counter = 0;
  function progressDemo() {
    counter++;
    document.getElementById( 'progress' ).value = counter;
    if( counter == 95 ) {
   clearInterval( timer );
    }
  }
  var timer = setInterval( progressDemo,  );
  var counter1 = 0;
  function progressDemo1() {
    counter1++;
    document.getElementById( 'progress2' ).value = counter1;
    if( counter1 == 85 ) {
   clearInterval( timer1 );
    }
  }
  var timer1 = setInterval( progressDemo1,  );
  var counter2 = 0;
  function progressDemo2() {
    counter2++;
    document.getElementById( 'progress3' ).value = counter2;
    if( counter2 == 95 ) {
   clearInterval( timer2 );
    }
  }
  var timer2 = setInterval( progressDemo2,  );
  var counter3 = 0;
  function progressDemo3() {
    counter3++;
    document.getElementById( 'progress4' ).value = counter3;
    if( counter3 == 60 ) {
   clearInterval( timer3 );
    }
  }
  var timer3 = setInterval( progressDemo3,  );
  var counter4 = 0;
  function progressDemo4() {
    counter4++;
    document.getElementById( 'progress5' ).value = counter4;
    if( counter4 == 30 ) {
   clearInterval( timer4 );
    }
  }
  var timer4 = setInterval( progressDemo4,  );
  var counter5 = 0;
  function progressDemo5() {
    counter5++;
    document.getElementById( 'progress6' ).value = counter5;
    if( counter5 == 30 ) {
   clearInterval( timer5 );
    }
  }
  var timer5 = setInterval( progressDemo5,  );
  var counter6 = 0;
  function progressDemo6() {
    counter6++;
    document.getElementById( 'progress7' ).value = counter6;
    if( counter6 == 60 ) {
   clearInterval( timer6 );
    }
  }
  var timer6 = setInterval( progressDemo6,  );
READ ALSO
Как выровнять текст и иконку по центру?

Как выровнять текст и иконку по центру?

Как выровнять текст и иконку по центру,чтобы они были на одном уровне ? На данный момент текст находится у нижней части иконки

84
Как вывести данные в порядке обратном от того, в котором они лежат в БД?

Как вывести данные в порядке обратном от того, в котором они лежат в БД?

У меня есть поле поле pipe_n, в котором данные лежат так:

100
Работа с БД из двух приложений

Работа с БД из двух приложений

Есть два приложения:

120
Реализация сочетания клавиш в консоли

Реализация сочетания клавиш в консоли

Подскажите, а как можно реализовать работу сочетаний клавиш в консоли?

103