recherche

Maison >interface Web >js tutoriel >Exemple de barre de progression implémentant JavaScript basée sur une minuterie

Exemple de barre de progression implémentant JavaScript basée sur une minuterie

黄舟
黄舟original
2018-05-12 14:06:322143parcourir

Cet article présente principalement l'implémentation de la fonction de barre de progression basée sur le timer en javascript. Il analyse brièvement la fonction et l'utilisation du timer javascript et donne un exemple de la fonction de barre de progression basée sur le timer. Les amis qui en ont besoin. peut s'y référer

L'exemple de cet article décrit comment JavaScript implémente la fonction de barre de progression basée sur la minuterie. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Minuterie en Javascript

La méthode sous la ligne de degré de la fenêtrewindow.setInterval() Démarrez le minuteur

1.setInterval(function(function), time(combien de fois la fonction est exécutée, en millisecondes))

effectuera une opération à 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 setTiemout défini

setInterval correspond Est clearInterval ( object) Effacez l'objet setInterval qui a été défini

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>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 en cours d'exécution :

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

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：Comment implémenter une requête de pagination dans le nœudArticle suivant：Comment implémenter une requête de pagination dans le nœud

Articles Liés

Voir plus