Skocz do zawartości

Progress Bar w html - co dalej po załadowaniu?

dxdawid

Przez dxdawid,
w Webmastering i skrypty

Rekomendowane odpowiedzi

dxdawid

dxdawid

Opublikowano
Opublikowano

Siemka, tak jak w tytule mam progress bar na stronie i ładuje sie po kliknięciu na przycisk, lecz nie mogę dojść do tego gdzie i jak wpisać na przykład tekst, żeby sie wyświetlił po załadowaniu bara. Jakieś pomysły? Niżej moze podam kod jak to wygląda. 

<head>
<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
        </script>
</head>
<body>
  <div>
										<div id="myProgress">
										<div id="myBar">0%</div>
										</div>
										<br>
								
							
  </div>       
</body>
								


#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;

  width: 250px;
  height: 20px;
  
  position: relative;
  display: block;
}
  
.progress-bar > span {
  background-color: blue;
  border-radius: 2px;

  display: block;
  text-indent: -9999px;
}
Odnośnik do komentarza

Dołącz do nas za darmo i naucz się zarabiać!

  • Dostęp do darmowych poradników pokazujących krok po kroku jak zarabiać w Internecie
  • Sposoby zarabiania niepublikowane nigdzie indziej
  • Aktywna społeczność, która pomoże Ci rozwiązać problemy i doradzi
  • Profesjonalne treści na temat SEO, social media, afiliacji, kryptowalut i wiele więcej!

 

 

Montana

Montana

Opublikowano
Opublikowano 
function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

 

Jeśli chcesz, żeby coś wyskoczyło po załadowaniu się progressbara, ładujesz to w pierwszym warunku ifa, mianowicie - jeżeli szerokość jest większe, bądź równe 100, dzieje się coś. 

function frame() {
if (width >= 100) {
clearInterval(id);
//Tutaj co ma się wydarzyć, po załadowaniu np. document.write, console.log, alert, prompt - cokolwiek.
}

 
  • Super 4
Odnośnik do komentarza

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
Tematy
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Ta strona korzysta z ciasteczek, aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie z witryny oznacza zgodę na ich wykorzystanie. Polityka prywatności .

  I accept