Javascript implémente un exemple de fonction de barre de progression basé sur une minuterie-js tutoriel-php.cn

Javascript implémente un exemple de fonction de barre de progression basé sur une minuterie

韦小宝

Libérer： 2018-01-12 09:58:16

original

1612 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 intéressés par JavaScript peuvent se référer à cet article

L'exemple de cet article décrit comment JavaScript implémente la fonction de barre de progression basée sur une 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

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

Donnez un cas :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.php.cn 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

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

Recommandations associées :

Solution aux problèmes liés au téléchargement de fichiers étranges par ajaxFileUpload.js

javascript - Le téléchargement de Qiniu JS demande que le spécifié l'espace n'existe pas

javascript - Comment initialiser le téléchargeur après avoir cliqué sur un bouton lors du téléchargement de Qiniu js

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Javascript implémente un exemple de fonction de barre de progression basé sur une minuterie