简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

js进度条范例代码

高洛峰
Libérer： 2016-12-16 16:46:48
original
1175 Les gens l'ont consulté

例子，非常简洁的js进度条实现代码，可用于消耗时间较多的页面加载或批量生成页面的情况。

完整代码：

<!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> 
<title>js进度条-www.yuju100.com</title> 
<style type="text/css"> 
body{ 
text-align:center; 
} 
.graph{ 
width:450px; 
border:1px solid #F8B3D0; 
height:25px; 
} 
#bar{ 
display:block; 
background:#FFE7F4; 
float:left; 
height:100%; 
text-align:center; 
} 
#barNum{ 
position:absolute; 
} 
</style> 
<script type="text/javascript"> 
function $(obj){ 
return document.getElementById(obj); 
} 
function go(){ 
$("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 
$("bar").innerHTML = $("bar").style.width; 
if($("bar").style.width == "100%"){ 
window.clearInterval(bar); 
}
} 
var bar = window.setInterval("go()",50); 
window.onload = function(){ 
bar; 
} 
</script> 
</head> 
<body> 
<div class="graph"> 
<strong id="bar" style="width:1%;"></strong> 
</div> 
</body> 
</html>
Copier après la connexion


更多js进度条范例代码相关文章请关注PHP中文网！

Étiquettes associées：
js进度条
source：php.cn
Article précédent： pace.js – 网页自动加载进度条插件 Article suivant：JS 实现带进度条的页面跳转特效
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment puis-je définir la hauteur d'un div externe pour qu'elle soit toujours égale à la hauteur d'un div interne spécifique ? J'ai un div externe qui contient trois div internes. Je veux que le div interne le plus à ...
Depuis 2023-11-07 13:59:30
0
2
314
Veuillez d'abord appliquer la transformation appropriée pour résoudre l'erreur de serveur interne vite : nœud de génération de code manquant pour le nœud élément /if/for Donc hier, je travaillais sur un projet et alors que je m'apprêtais à arrêter parce que j'...
Depuis 2023-10-26 14:52:04
0
2
211
Alignez les points décimaux des nombres du tableau avec un pseudo alignement « central » apparaissant dans les cellules Je veux un tableau avec une colonne de nombres décimaux, avec des longueurs différentes av...
Depuis 2023-10-24 13:01:47
0
1
266
Convertir une expression régulière JavaScript en PHP Je sais que cette question a été posée une douzaine de fois, mais techniquement ce n'est p...
Depuis 2023-10-23 22:58:33
0
2
394
将Inclure un tableau en tant que dépendance dans useEffect Des données proviennent du long sondage toutes les 5 secondes et je souhaite que mon compo...
Depuis 2023-10-17 18:50:23
0
2
207
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！