masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)_javascript技巧

JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)_javascript技巧

WBOY

Lepaskan： 2016-05-16 18:49:33

asal

860 orang telah melayarinya

复制代码代码如下:

[code]

[/code]
运行演示代码:

<title>JavaScript Data Access Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<script type="text/javascript"> 
var loading = { 
element: null, 
count: 0, 
ID: 0, 
createLoading: function(parent, width, height){ 
loading.element = document.createElement("div"); 
loading.element.id = "loading"; 
loading.element.className = "loading"; 
loading.element.style.height = height; 
loading.element.style.backgroundColor = "#ffffff"; 
loading.element.style.border = "1px solid #333333"; 
loading.element.style.width = width; 
parent.appendChild(loading.element); 
//code from jb51.net 
loading.interval(); 
}, 
addSubDIV: function(){ 
if ((loading.count + 1) * 2 >= parseInt(loading.element.style.width)) { 
loading.count = 0; 
clearInterval(loading.ID); 
loading.element.innerHTML = ""; 
loading.interval(); 
} 
else { 
var elem = document.createElement("div"); 
                        elem.className='sub-loading'; 
elem.style.backgroundColor = "#f00"; 
elem.style.width = "2px"; 
elem.style.height = loading.element.style.height; 
                        elem.style.display="inline"; 
loading.element.appendChild(elem); 
loading.count++; 
} 
}, 
interval: function(){ 
loading.ID = setInterval(loading.addSubDIV, 30); 
} 
} 
onload = function(){ 
loading.createLoading(document.getElementById("parent"), "402px", "15px"); 
} 
</script>

<style>.sub-loading { 
    DISPLAY: inline 
} 
</style> 
<meta content="MSHTML 6.00.6000.16850" name="GENERATOR"> 
 
<div id="parent"></div>

Label berkaitan：

javascript bar kemajuan

sumber：php.cn

Artikel sebelumnya：javascript IFrame 强制刷新代码_javascript技巧 Artikel seterusnya：jQuery TextBox自动完成条_jquery

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

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}

daripada 2024-04-06 19:25:49

0

1

505

Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...

daripada 2024-04-06 18:16:26

0

1

403

Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

daripada 2024-04-06 15:35:24

0

1

274

Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...

daripada 2024-04-06 14:54:03

0

2

421

Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...

daripada 2024-04-06 12:53:11

0

1

376

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