suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie den JS-Timer, um den Fortschrittsbalken zu implementieren

Verwenden Sie den JS-Timer, um den Fortschrittsbalken zu implementieren

php中世界最好的语言
php中世界最好的语言Original
2018-04-17 15:28:021736Durchsuche

Dieses Mal werde ich Ihnen die Verwendung des JS-Timers zum Implementieren des Fortschrittsbalkens vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung des JS-Timers zum Implementieren des Fortschrittsbalkens? ein Blick.

Timer in Javascript

Methode unterhalb des Fenstergrads window.setInterval() Starten Sie den Timer

1.setInterval(function(function),time(wie oft die Funktion ausgeführt wird, Einheit ist Millisekunde))

Ein Vorgang wird wiederholt ausgeführt

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

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

Timer stoppen

setTimeout entspricht clearTimeout (Objekt). Löscht das eingestellte setTiemout-Objekt

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

Geben Sie einen Fall an: 

<!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>进度条</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>

Wenn Sie das Programm ausführen, wird der Fortschrittsbalken auf der Webseite geladen und die Ladegeschwindigkeit hängt davon ab zur Zeit!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

4 unverzichtbare Web-Frontend-Entwicklungsbücher

Verwendung von JS zur Implementierung der Formularvalidierung ( mit Code)

Detaillierte Erklärung der Verwendung von Vue-Router

Das obige ist der detaillierte Inhalt vonVerwenden Sie den JS-Timer, um den Fortschrittsbalken zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript 表单验证 JS function 对象
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 Erklärung der Verwendung von Vue-RouterNächster Artikel：Detaillierte Erklärung der Verwendung von Vue-Router

In Verbindung stehende Artikel

Mehr sehen