recherche

Maison >interface Web >js tutoriel >La minuterie JavaScript implémente la fonction de barre de progression

La minuterie JavaScript implémente la fonction de barre de progression

小云云
小云云original
2018-01-29 10:34:422672parcourir

Cet article présente principalement JavaScript pour implémenter la fonction de barre de progression basée sur la minuterie. Il analyse brièvement la fonction et l'utilisation de la minuterie JavaScript et donne un exemple de la fonction de barre de progression basée sur la minuterie. Les amis qui en ont besoin peuvent s'y référer. à cela. J'espère que cela pourra aider tout le monde.

Timer en Javascript

La méthode ci-dessous window.setInterval() démarre la minuterie

1.setInterval(function(function),time(every Combien de temps faut-il pour exécuter une fonction, en millisecondes))

effectuera une opération à plusieurs reprises

2.setTimeout est utilisé pour retarder une période de temps avant d'effectuer une opération

setTimeout (fonction, temps), setTimeout ne sera pas répété !

Arrêter le timer

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

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

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

Effet d'exécution :

Lors de l'exécution du programme, la barre de progression sur la page Web se chargera, la vitesse de chargement est liée au temps!

Recommandations associées :

Méthode d'instance de barre de progression de chargement de page Web js

Méthode d'implémentation de la barre de progression de chargement de page Web jquery

Explication détaillée de l'implémentation jQuery de la barre de progression déplaçable

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!

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 la résolution dans l'optimisation du chemin de vueArticle suivant：Explication détaillée de la résolution dans l'optimisation du chemin de vue

Articles Liés

Voir plus