我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现的。

我们在新建的页面中，输入一个段落标签，一个进度条，一个button按钮。

然后，我们需要设置一下进度条显示的进度。value代表从多少开始，max代表到多少结束。我们做的是百分比形式的，应该写成这样的。

这些做好之后，我们需要书写两个小的事件，实现原理大体上是鼠标单击下载按钮，开始下载变为正在下载百分之多少，等到达到我们预设的时间后显示下载完成。

我们之前已经给p标签和progress标签分别赋予了不同的id，我们需要获取到这两个元素，并将他们赋给两个变量。

我们还要将progress的初始值设为0,当鼠标单击的时候，我们以一定的时间为周期调用写好的事件。

函数写好之后，我们在浏览器中调试，点击下载按钮之后会在300ms内完成下载时间。

$(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()

})

})