jquery實現(xiàn)的一個簡單進度條效果實例
更新時間：2014年05月12日 09:02:45 作者：
這篇文章主要介紹了jquery實現(xiàn)的一個簡單進度條效果實例,很好的一個入門實例,從一個方面介紹了進度的實現(xiàn)原理,需要的朋友可以參考下
jquery實現(xiàn)一個進度條的效果，或許在這里沒有什么實際的作用，但是已經(jīng)實現(xiàn)了進度條的部分原理，前端是怎么實現(xiàn)那種進度效果的。
效果演示：
進度條實現(xiàn)源碼：
復制代碼 代碼如下:
<!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實現(xià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進度條
$("#bar").css("width","0px");
//進度條的速度，越小越快
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//寬度要不能大于進度條的總寬度
if(nowWidth<=200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//進度條讀滿后，停止
clearInterval(bar);
}
},speed);
}
</script>
</head>
<body>
<input type="button" value="開始" onclick="progressBar()" />
<div class="progressBar"><div id="bar"></div></div>
</body>
</html>
您可能感興趣的文章:
相關文章
jquery創(chuàng)建一個新的節(jié)點對象(自定義結構/內(nèi)容)的好方法
jq創(chuàng)建一個新的節(jié)點對象,這對一些自定義功能很有幫助，而且可以隨意控制對象的結構與內(nèi)容，何樂而不為呢，看到這里，相信有些朋友已經(jīng)按耐不住了，好記下來為大家介紹實現(xiàn)方法，感興趣的朋友可以了解下哦2013-01-01
讓元素可拖動的方法有很多，本文為大家介紹下使用jquery簡單實現(xiàn)拖動效果，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
javascript中對Attr(dom中屬性)的操作示例講解
這篇文章主要是對javascript中對Attr(dom中屬性)的操作進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
此Jquery插件是一款非常實用的特效，不但有分享功能，還具備了動畫效果，提高了用戶體驗，感興趣的朋友可以參考下哈2013-04-04
輕松學習jQuery插件EasyUI EasyUI實現(xiàn)樹形網(wǎng)絡基本操作(2)
這篇文章主要幫助大家輕松學習jQuery插件EasyUI，針對EasyUI實現(xiàn)樹形網(wǎng)絡基本操作，分為三大方面：動態(tài)加載、添加分頁、以及惰性加載節(jié)點，感興趣的小伙伴們可以參考一下2015-11-11
本篇文章主要是對jquery ajax,ashx,json的用法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
在每一個匹配元素的change事件中綁定一個處理函數(shù)。change事件會在元素失去焦點的時候觸發(fā)，也會當其值在獲得焦點后改變時觸發(fā)。2011-09-09
這篇文章主要介紹了jQuery中Find選擇器用法,簡單介紹了find選擇器的功能,并結合實例分析了find選擇器的具體使用方法,需要的朋友可以參考下2016-09-09![jQuery學習筆記[1] jQuery中的DOM操作](http://img.jbzj.com/images/xgimg/bcimg8.png)
jQuery中的DOM操作實現(xiàn)說明，學習DOM操作的朋友可以參考下。2010-12-12
通過過濾器可以獲取特定的表單元素，如非輸入項目或者單選按鈕的已選項目等元素，可用的2011-07-07