jquery進度條例子
Ⅰ 用jquery做一個音樂控制 有進度條和控制按鈕
使用audio標簽即可
Ⅱ jQuery Ajax進度條效果
其實這種效果在實際應用中並不是太實用，如果你需要有一個進度的話，這必然前台與後台要實時交互才會出效果。比如你從資料庫中遍歷一組用戶的信息，這中間需要一個不斷遞增的數字來實時調節頁面的進度條。這就需要你不斷的去請求伺服器。當然也可以做個純頁面處理不通過伺服器的，但執行時間你無法估計，造成不同步。
有一個簡單的方法，首先得到這個需要讀取數據的總條目數，然後在前台頁面使用一個類似於遞歸的循環調用這個AJAX方法，再通過返回的數據來實時控制頁面的進度條，通過返回成功的狀態重復來調用此方法，最後用總條目數來控制這個遞歸什麼時候停止。
Ⅲ jquery 進度條 struts2
檢查一下是不是js腳本錯誤,jQuery對IE的支持不那麼盡如人意..拼寫上注意一下.
Ⅳ 關於js或jquery進度條實現
寫一個div定義寬高，下面鋪一個背景圖片，作為進度條為空的情況。
再在div內部加添加一個img圖片，這個圖片要可以左右延展的。然後用JavaScript動態控制圖片的寬度即可，實現進度展現。
Ⅳ jquery 進度條，根據指定的值在進度條中顯示。各位有沒有例子或相關例子。 如下圖:想要動態的
其實這個效果並非你想像的是用進度條做的，
它只是換了張圖片，讓你看到有那樣的感覺，
比如說像上面的，沒一個選項都是一張圖片，
如果用戶點擊了4，選擇滿意，即將1，2,3,4的換成彩色圖片，
其它的都為灰色，至於用戶已選擇後，下次還能看到自己的選擇，
也是一個道理，後台給出用戶選擇的值，按照這樣改變圖片顏色就達到了
Ⅵ java/html中拉動進度條怎麼做類似調顯示器顏色時的進度條！可以用jquery！
我用jquery做過一個，是我學jq的練習作品，代碼寫得有點菜，下面貼上它的拖動類，完整的代碼見參考資料
$(function () {
/* 滑動條類
@param obj sliSlt 滑動條
@param obj sliBck 滑動塊
@param obj numBox 顏色值框
@param obj sliMin 滑動范圍最小值
@param obj sliMax 滑動范圍最大值
*/
function slideBar(sliSlt,sliBck,numBox,sliMin,sliMax) {
this.sliSlt=sliSlt,
this.sliBck=sliBck,
this.numBox=numBox,
this.sliMin=sliMin,
this.sliMax=sliMax,
this.clr=255,
this.doc=$(document);
var _this=this;
this.startDrag=function (evt1) {
//初始化
var inX=evt1.layerX || evt1.offsetX,
outLeft=_this.sliSlt.offset().left,
temX=0;
//綁定mousemove事件
_this.doc.mousemove(function(evt2) {
temX=evt2.clientX-outLeft-1-inX;
if(!_this.moveTo(temX,_this.sliMin,_this.sliMax)) return ;
_this.clr=parseInt(_this.calClr(temX));
_this.chgVal();
_this.setClrByRGB();
});
};
//移動滑塊
this.moveTo=function (x,min,max) {
if(x<min || x>max) return false;
_this.sliBck.css('left',x);
return true;
};
//計算顏色值
this.calClr=function (x) {
return x*255/(_this.sliMax-_this.sliMin);
};
//改變顏色值
this.chgVal=function (c) {
c= c || _this.clr;
_this.numBox.val(c);
};
//停止拖動
this.stopDrag=function () {
_this.doc.unbind('mousemove');
};
//設置顏色
this.setBodyClr=function (hexStr) {
$("body").css('backgroundColor',hexStr);
};
//設置#hexColor
this.setHexClr=function (hexStr) {
hexClrBox.val(hexStr);
};
//setColorByRGB
this.setClrByRGB=function () {
var hexStr=calcHexClr(clrBox.r.val(),clrBox.g.val(),clrBox.b.val());
_this.setBodyClr(hexStr);
_this.setHexClr(hexStr);
};
//綁定mousedown/up事件
this.sliBck.mousedown(function(evt) {_this.startDrag(evt);});
this.numBox.keydown(function(evt) {
if(evt.keyCode==13) {
if(!setPos()) return ;
_this.setClrByRGB();
};
});
this.doc.mouseup(_this.stopDrag);
};
var s1Slt=$("#cR"),s1Bck=$("#cR .slider"),s1Box=$("#cR .showBox"),
s2Slt=$("#cG"),s2Bck=$("#cG .slider"),s2Box=$("#cG .showBox"),
s3Slt=$("#cB"),s3Bck=$("#cB .slider"),s3Box=$("#cB .showBox"),
hexClrBox=$("#hexColor"),sliRag={min:0,max:495},randBtn=$("#randClr");
//創建類的實例
var s1=new slideBar(s1Slt,s1Bck,s1Box,sliRag.min,sliRag.max),
s2=new slideBar(s2Slt,s2Bck,s2Box,sliRag.min,sliRag.max),
s3=new slideBar(s3Slt,s3Bck,s3Box,sliRag.min,sliRag.max),
clrBox={
r:s1.numBox,
g:s2.numBox,
b:s3.numBox
};
//hexColor
hexClrBox.keydown(function(evt) {
if(evt.keyCode==13) {
hexStr=hexClrBox.val();
setClrByHex(hexStr);
};
});
//init
setClrByHex('#ABCDEF');
//由十六進制顏色值來設置
function setClrByHex(hexStr) {
var rgbClr=hexrgb(hexStr);
if(!rgbClr) return false;
s1.numBox.val(rgbClr.r);
s2.numBox.val(rgbClr.g);
s3.numBox.val(rgbClr.b);
setPos();
s1.setHexClr(hexStr);
s1.setBodyClr(hexStr);
};
//設置位置
function setPos() {
var clr={r:parseInt(s1Box.val()),g:parseInt(s2Box.val()),b:parseInt(s3Box.val())};
if(!checkRGB(clr)) return false;
var temp=sliRag.max-sliRag.min;
s1Bck.css('left',clr.r*temp/255);
s2Bck.css('left',clr.g*temp/255);
s3Bck.css('left',clr.b*temp/255);
return true;
};
//randBtn
randBtn.click(function () {
var clrVal={r:0,g:0,b:0}, animTime={r:0,g:0,b:0};
clrVal=objAsn(clrVal,0,495);
animTime=objAsn(animTime,500,800);
//修改並禁用按鈕
randBtn.val('生成中…');
randBtn.attr('disabled','true');
//設置動畫
crtAnim(s1Bck,{left:clrVal.r},animTime.r);
crtAnim(s2Bck,{left:clrVal.g},animTime.g);
crtAnim(s3Bck,{left:clrVal.b},animTime.b);
//動畫時改變顏色及顏色值
var t= setInterval(function() {
rwVal(s1);
rwVal(s2);
rwVal(s3);
s1.setClrByRGB();
},60);
//動畫結束後恢復按鈕
setTimeout(function() {
randBtn.val('隨機產生顏色');
randBtn.removeAttr('disabled');
clearInterval(t);
},findMax(new Array(animTime.r,animTime.g,animTime.b)));
//修改文本框的值
function rwVal(o) {
o.chgVal(parseInt(o.calClr(parseInt(o.sliBck.css("left")))));
};
//創建動畫 o:創建動畫的元素;c:css集合;t:動畫時間
function crtAnim(o,c,t) {
o.animate(c,t,'swing');
};
});
//消息彈出窗口
var infoBtn=$('.infoBtn'),infoBrd=$('#infoBrd'),closeBtn=$('#infoBrd a'),infoIfr=$('#infoBrd iframe');
infoBtn.click(function () {
$('<p>',{'id':'loadTip',text:'Loading......'}).appendTo(infoBrd);
infoIfr.attr("src",this.href);
infoBrd.toggle('normal');
return false;
});
closeBtn.click(function () {
infoBrd.toggle('fast');
infoIfr.removeAttr("src");
return false;
});
infoIfr.load(function(){
$('p#loadTip').empty();
});
});
Ⅶ 用jquery怎麼寫一個進度條並且能夠控制它的快慢
復制文件的進度，你是很難控制的，所以你只需要做一個效果就可以了，就一條滾動條就好了，一直重復
Ⅷ jquery 動態進度條，根據計算出的值藍點在進度條中相應數值上顯示。各位俠客幫幫忙！
藍點做成背景圖，放到一個絕對定位的Div中，這個DIV浮在藍色線條之上，如下：
css樣式：
#progress{position:absolute;background:point.gif;width:2px;height:2px;}
<div id="progress"></div>
假設計算出來的BMI的值為18,則使用jqeury操作：
$("#progress").animate({"left":"18px"},"slow");
你的 明白了？
明白了 給分 多簡單的思路啊。
Ⅸ jquery 進度條怎麼實現
基本上是沒有辦法實現的~虛假進度條還可以~但是真實進度條就不行的~這個問題我也問過~ 再說，如果是實現進度條的話，用jquery根本就是不行的~因為jquery本身的原理就是需要把庫文件load了才能正常運行的~本身庫文件就有一定的體積，那麼就會造成進度條有誤差了~ 不過如果你真的需要做的話~可以上我們團隊博客看看~有相應的文章可以給你參考~
Ⅹ 用jquery實現進度條效果
二樓的方法不是常規的解決辦法，個人感覺不是很好(不過他實現的載入進度是真實的，他的進度條是可以反映當前未載入頁面的剩餘內容的---其實這種方法也挺好....不過一般情況下沒什麼必要吧，如果要做成這樣的，用flex更好)。
一樓的方法不是正確的。如果簡單地放一個loading圖片在頁面上的話，會有兩種情況：一、有可能實現載入的效果 。 二、在整個頁面其它元素載入了大部分或全部後，這張圖片才載入進來，那就實現不了載入的效果了。
常規的解決辦法還是用ajax比較好。大概是這樣的。
需要兩個頁面。1.一個是實際頁面本身 2.另一個是一個空白頁面放一張loading圖片
先請求第2個頁面，在這個頁面中放一段ajax請求第1個頁面，在success函數里將頁面內容輸出，並將loading圖片隱藏掉。
代碼是這樣的：
loading page:
<body>
<img id='loadingImg' src='loading.gif' />
<body>
<script>
$.ajax({
type: 'GET',
url: 實際頁面路徑,
data: {},
success: function(){
$('body').append(data);
$('#loadingImg').hide();//或直接remove()
},
dataType: 'html'
});
</script>
==========================================================
呵呵，一個載入的問題要考慮搜索的話原來就這么麻煩了。 <div id="forspider">.....給搜索蜘蛛看的純HTML....</div>這裡面的內容是整個實際頁面的HTML嗎？是的話，那這個loading頁面本身載入就很笨重了，還不如直接跳到真實頁面呢。 哎，可惜我不太懂搜索，悲劇。請指教----為什麼要用絕對定位覆蓋的方法來隱藏。直接把這一層display:none的話蜘蛛也會看不到嗎？
以上回答你滿意么？