Exemple de barre de progression implémentant JavaScript basée sur une minuterie-js tutoriel-php.cn

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

黄舟

Libérer： 2018-05-12 14:06:32

original

2040 Les gens l'ont consulté

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>

Copier après la connexion

Effet en cours d'exécution :