recherche

Maison >interface Web >js tutoriel >Exemple simple de barre de progression d'une page Web javascript

Exemple simple de barre de progression d'une page Web javascript

高洛峰
高洛峰original
2017-02-23 17:29:001640parcourir

Un exemple simple de barre de progression de page Web javascript

J'ai récemment acquis de nouvelles connaissances et rencontré une petite barre de progression de page Web fonctionnelle. J'ai trouvé un article qui est plutôt bon. . Je vais l'enregistrer ici, peut-être que ça peut aider tout le monde,

Exemple de code : 

<!DOCTYPE html>
<html>
<head>
<style>
#box {float:left;width:100%;height:18px;border:1px solid;}
#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<p id="box">
<p id="bar"></p>
</p>
<script language="javascript">
var total = 6480; //总数
var curN = 4480; //当前值
function show()
{
 var box = document.getElementById("box");
 var o = document.getElementById("bar");
 o.style.width = ((curN / total) * 200) + &#39;px&#39;; //200是外框的宽度
}
show();
</script>
</body>
</html>

Négation : 

<!DOCTYPE html>
<html>
<head>
<style>
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:100%;height:18px;border:0px;background:#00f;}
</style>
</head>
<body>
<p id="box">
<p id="bar"></p>
</p>
<script language="javascript">
var total = 6480; //总数
var curN = 6400; //当前值
var baseNub = total - curN;
function show()
{
 var box = document.getElementById("box");
 var o = document.getElementById("bar");
 o.style.width = ((baseNub / total) * 200) + &#39;px&#39;; //200是外框的宽度
}
show();
</script>
</body>
</html>

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

Pour plus d'articles liés à des exemples simples de barre de progression de page Web javascript, veuillez faire attention au site Web PHP 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：js implémente la barre de navigation avec un simple mouvement élastiqueArticle suivant：js implémente la barre de navigation avec un simple mouvement élastique

Articles Liés

Voir plus