简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

js进度条范例代码

高洛峰
Lepaskan： 2016-12-16 16:46:48
asal
1198 orang telah melayarinya

例子，非常简洁的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>
Salin selepas log masuk


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

Label berkaitan：
js进度条
sumber：php.cn
Artikel sebelumnya： pace.js – 网页自动加载进度条插件 Artikel seterusnya：JS 实现带进度条的页面跳转特效
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...
daripada 2024-04-06 19:54:23
0
1
444
Perintah pelaksanaan fungsi penjadualan VueJS menyebabkan masalah Saya cuba memaparkan senarai pengumuman (diambil daripada API) pada halaman. Saya mengguna...
daripada 2024-04-06 10:37:58
0
1
385
Tajuk jadual diputar secara menegak, dijajarkan di tengah + bawah, penyemak imbas silang Saya mempunyai jadual dengan pengepala berputar yang kelihatan seperti yang diharapkan dal...
daripada 2024-04-04 16:45:25
0
1
330
Apabila mendapatkan data daripada berbilang jadual, cara membuat pertanyaan berdasarkan entri dalam jadual dalam kumpulan SQL Saya mempunyai dua jadual klik 2.ride click table id |. time ride table id |. dibuat, teta...
daripada 2024-04-04 08:58:17
0
1
319
Gunakan kaedah daripada memohon Untuk mencari nilai maksimum tatasusunan, cara mudah ialah Math.max.apply(null,myArray) Wa...
daripada 2024-04-03 21:41:46
0
2
278
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！