快捷導(dǎo)航

jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例

更新時(shí)間：2014年05月12日 09:02:45 作者：

這篇文章主要介紹了jquery實(shí)現(xiàn)的一個(gè)簡(jiǎn)單進(jìn)度條效果實(shí)例,很好的一個(gè)入門實(shí)例,從一個(gè)方面介紹了進(jìn)度的實(shí)現(xiàn)原理,需要的朋友可以參考下

jquery實(shí)現(xiàn)一個(gè)進(jìn)度條的效果，或許在這里沒(méi)有什么實(shí)際的作用，但是已經(jīng)實(shí)現(xiàn)了進(jìn)度條的部分原理，前端是怎么實(shí)現(xiàn)那種進(jìn)度效果的。

效果演示：

進(jìn)度條實(shí)現(xiàn)源碼：

復(fù)制代碼代碼如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery實(shí)現(xiàn)進(jìn)度條</title>
<style>
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
function progressBar(){
  //初始化js進(jìn)度條
  $("#bar").css("width","0px");
  //進(jìn)度條的速度，越小越快
  var speed = 20;

  bar = setInterval(function(){
   nowWidth = parseInt($("#bar").width());
   //寬度要不能大于進(jìn)度條的總寬度
   if(nowWidth<=200){
    barWidth = (nowWidth + 1)+"px";
    $("#bar").css("width",barWidth);
   }else{
    //進(jìn)度條讀滿后，停止
    clearInterval(bar);
   }
  },speed);
}
</script>
</head>

您可能感興趣的文章:

相關(guān)文章

jquery創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
jq創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象,這對(duì)一些自定義功能很有幫助，而且可以隨意控制對(duì)象的結(jié)構(gòu)與內(nèi)容，何樂(lè)而不為呢，看到這里，相信有些朋友已經(jīng)按耐不住了，好記下來(lái)為大家介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下哦
2013-01-01
讓元素在網(wǎng)頁(yè)中可拖動(dòng)示例代碼
讓元素可拖動(dòng)的方法有很多，本文為大家介紹下使用jquery簡(jiǎn)單實(shí)現(xiàn)拖動(dòng)效果，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
Jquery實(shí)現(xiàn)彈出層分享微博插件具備動(dòng)畫(huà)效果
此Jquery插件是一款非常實(shí)用的特效，不但有分享功能，還具備了動(dòng)畫(huà)效果，提高了用戶體驗(yàn)，感興趣的朋友可以參考下哈
2013-04-04
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹(shù)形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，針對(duì)EasyUI實(shí)現(xiàn)樹(shù)形網(wǎng)絡(luò)基本操作，分為三大方面：動(dòng)態(tài)加載、添加分頁(yè)、以及惰性加載節(jié)點(diǎn)，感興趣的小伙伴們可以參考一下
2015-11-11
jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
Jquery Change與bind事件代碼
在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。
2011-09-09
jQuery中Find選擇器用法示例
這篇文章主要介紹了jQuery中Find選擇器用法,簡(jiǎn)單介紹了find選擇器的功能,并結(jié)合實(shí)例分析了find選擇器的具體使用方法,需要的朋友可以參考下
2016-09-09
jQuery學(xué)習(xí)筆記[1] jQuery中的DOM操作
jQuery中的DOM操作實(shí)現(xiàn)說(shuō)明，學(xué)習(xí)DOM操作的朋友可以參考下。
2010-12-12
jquery中通過(guò)過(guò)濾器獲取表單元素的實(shí)現(xiàn)代碼
通過(guò)過(guò)濾器可以獲取特定的表單元素，如非輸入項(xiàng)目或者單選按鈕的已選項(xiàng)目等元素，可用的
2011-07-07