Maison > Article > interface Web > Utilisez la minuterie JS pour implémenter la barre de progression

Utilisez la minuterie JS pour implémenter la barre de progression

php中世界最好的语言original: 2018-04-17 15:28:021704parcourir

Cette fois, je vais vous présenter l'utilisation du timer JS pour implémenter la barre de progression. Quelles sont les précautions pour utiliser le timer JS pour implémenter la barre de progression. Ce qui suit est un cas pratique, prenons. un regard.

Minuterie en Javascript

Méthode en dessous du degré de la fenêtre window.setInterval() Démarrer le minuteur

1.setInterval(function(function),time(à quelle fréquence la fonction est exécutée, l'unité est la milliseconde))

Une opération sera effectuée à plusieurs reprises

2.setTimeout est utilisé pour retarder un certain temps avant d'effectuer une opération

setTimeout(function,time) ,setTimeout ne sera pas répété !

Arrêter le minuteur

setTimeout correspond à clearTimeout (objet) Effacer l'objet set setTiemout

setInterval correspond à clearInterval(object) Effacer l'objet setInterval

Donnez un cas :

<!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>

Lorsque vous exécutez le programme, la barre de progression sur la page Web se charge et la vitesse de chargement est liée au temps!

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

4 livres de développement Web front-end à lire absolument

Utiliser JS pour implémenter la validation de formulaire ( avec code)

Explication détaillée de l'utilisation de vue-router

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript 表单验证 JS function 对象

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de vue-routerArticle suivant：Explication détaillée de l'utilisation de vue-router

Articles Liés

Voir plus