Javascript-Implementierung der Fortschrittsbalkenfunktion basierend auf einem Timer-js-Tutorial-php.cn

Javascript-Implementierung der Fortschrittsbalkenfunktion basierend auf einem Timer

韦小宝

Freigeben： 2018-01-12 09:58:16

Original

1663 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich Javascript zur Implementierung der Fortschrittsbalkenfunktion basierend auf dem Timer vorgestellt. Er analysiert kurz die Funktion und Verwendung des Javascript-Timers und gibt ein Beispiel für die Fortschrittsbalkenfunktion basierend auf dem Timer. Freunde, die sich für JavaScript interessieren, können auf diesen Artikel verweisen

Das Beispiel in diesem Artikel beschreibt, wie JavaScript die Fortschrittsbalkenfunktion basierend auf einem Timer implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Timer in Javascript

Die Methode unterhalb der Fenstergradliniewindow.setInterval() Starten Sie das Timer-Gerät

1.setInterval(function(function), time(wie oft die Funktion ausgeführt wird, in Millisekunden))

führt wiederholt einen Vorgang aus

2 .setTimeout wird verwendet, um die Ausführung einer Operation um einen bestimmten Zeitraum zu verzögern

setTimeout(function,time) , setTimeout wird nicht wiederholt!

Timer stoppen:

setTimeout entspricht clearTimeout (Objekt) Löschen Sie das setTiemout-Objekt.

setInterval entspricht clearInterval(Objekt ) Löschen Sie das festgelegte setInterval-Objekt

Geben Sie einen Fall an:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.php.cn js进度条</title>
<style type="text/css">
#outer/*外部*/
{
  margin-top:100px;
  border:solid black 1px;
  background-color:white;
  width:1004px;
  height:54px;
}
#inner/*内部*/
{
  background-color:red;
  width:0px;/*首先将内部的宽度定为0，用show（）来实现进度条！*/
  height:50px;
  margin-left:2px;
  margin-top:2px;
}
</style>
<script language="javascript">
function show()
{
  if(document.getElementById("inner").offsetWidth<1000)//offsetWidth实现的时候width是没有宽度的，而style.width实现的时候则有宽度（px）！
  {
    document.getElementById("inner").style.width=
    document.getElementById("inner").offsetWidth+20+"px";//每次执行show()函数的时候宽度都会加上20！
    console.log(document.getElementById("inner").style.width);//console 控制台 ：可以在网页上看到width的变化(利用F12)
  }
  else
  {
    document.getElementById("inner").style.width=1000+"px";//如果大于1000px的话，只能将1000px赋值给border-width;!
    stop();//此时就应该执行停止定时器的函数！
  }
}
var timer;//定义在两个函数外面，因为两个函数都会用到！
function start()
{
 timeer = window.setInterval(show,200);//每隔200ms调用一次show函数
}
function stop()
{
  timer = window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<p id="outer">
<p id="inner">
</p>
</p>
</body>
</html>

Nach dem Login kopieren

Beim Ausführen des Programms wird die Webseite angezeigt Der Fortschritt Die Leiste auf der Seite wird geladen und die Ladegeschwindigkeit hängt von der Zeit ab!

Verwandte Empfehlungen:

Lösung für Probleme im Zusammenhang mit dem Hochladen seltsamer Dateien durch ajaxFileUpload.js

Javascript – Qiniu JS-Upload fordert dazu auf, dass das angegebene Platz ist nicht vorhanden

Javascript – So initialisieren Sie den Uploader, nachdem Sie beim Hochladen von Qiniu js auf eine Schaltfläche geklickt haben

Das obige ist der detaillierte Inhalt vonJavascript-Implementierung der Fortschrittsbalkenfunktion basierend auf einem Timer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!