Heim > Artikel > Web-Frontend > Der JavaScript-Timer implementiert die Fortschrittsbalkenfunktion

Der JavaScript-Timer implementiert die Fortschrittsbalkenfunktion

小云云Original: 2018-01-29 10:34:422636Durchsuche

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 Ich hoffe, es kann allen helfen.

Timer in Javascript

Die Methode unten window.setInterval() startet den Timer

1.setInterval(function(function),time(every Wie lange dauert es eine Funktion ausführen, in Millisekunden))

führt wiederholt eine Operation aus

2.setTimeout wird verwendet, um einen Zeitraum zu verzögern, bevor eine Operation ausgeführt wird

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

Stoppen Sie den Timer

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

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

Gibt ein Fall:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net 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>

Laufeffekt:

Beim Ausführen des Programms wird der Fortschrittsbalken auf der Webseite geladen, die Ladegeschwindigkeit hängt davon ab zur Zeit!

Verwandte Empfehlungen:

JS schreibt die Fortschrittsbalken-Instanzmethode für Webseiten

JQuery-Webseiten-Lade-Fortschrittsbalken-Implementierungsmethode

Detaillierte Erläuterung der jQuery-Implementierung des ziehbaren Fortschrittsbalkens

Das obige ist der detaillierte Inhalt vonDer JavaScript-Timer implementiert die Fortschrittsbalkenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Auflösung bei der Vue-PfadoptimierungNächster Artikel：Detaillierte Erläuterung der Auflösung bei der Vue-Pfadoptimierung

In Verbindung stehende Artikel

Mehr sehen