masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 一个简单的jquery进度条示例_jquery

一个简单的jquery进度条示例_jquery

WBOY
Lepaskan： 2016-05-16 16:50:55
asal
1311 orang telah melayarinya

用jQuery实现的最简单的进度条，只有不到10行代码。样式可以直接忽略。（有一个图片需要自己找一下）

一个简单的jquery进度条示例_jquery

[CSS]代码

复制代码 代码如下:

$(function(){
    var i=0;
    (function progressBar(){
 i=i+1;
 if(i>=101){
    i=0;
 }
 $("#proc").animate({width:i+"%"},500);
 $("#progressWord").text(i+"%");
 setTimeout(progressBar,1500);
    })();
});

[CSS]代码

复制代码 代码如下:

     .progress_out{
 position:relative;
 border:1px solid #3c4d60;
 -webkit-box-shadow: #666 0px 0px 3px;
 -moz-box-shadow: #666 0px 0px 3px;
 box-shadow: #666 0px 0px 3px;
 width:200px;
 height:40px;
}
.progress_inner{
 background-color: #DADAE4;
 width: 100%;
 height: 40px;
}
.progress_word{
 position:absolute;
 left:50%;
 top:24%;
 font-weight: bold;
}

[HTML]代码

复制代码 代码如下:


  

 一个简单的jquery进度条示例_jquery
  

  
0%


Label berkaitan：
jquery进度条
sumber：php.cn
Artikel sebelumnya：JS实现两个大数(整数)相乘_javascript技巧 Artikel seterusnya：关于img的href和src取变量及赋值的方法_javascript技巧
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
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
Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...
daripada 2024-04-04 18:40:04
0
1
3528
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