La minuterie JavaScript implémente la fonction de barre de progression-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-29 10:34:42

original

2676 Les gens l'ont consulté

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>

Copier après la connexion

Effet d'exécution :