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) + 'px'; //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) + 'px'; //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 !
Comment ouvrir des fichiers HTML sur un téléphone mobile
Windows ultime
Comment se connecter à la base de données dans SQLplus
Le Metaverse reconnaît les dix principales pièces potentielles
Supprimer le champ du tableau
méthode appelée par le spectateur
Quels sont les langages de programmation chinois ?
disposition absolue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
