html5进度条怎么写

首先，我们制作的这个进度条并没有后台数据作为支撑，所以是一个靠js实现的一个简单的页面。

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

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

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

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

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

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

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

我用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')

}

})

//消息d出窗口

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

})

})

HTML代码：

<section class="container">

<div class="progress">

<span style="width: 20%"><span>20%</span></span>

</div>

<div class="progress">

<span class="green" style="width: 40%"><span>40%</span></span>

</div>

<div class="progress">

<span class="orange" style="width: 60%"><span>60%</span></span>

</div>

<div class="progress">

<span class="red" style="width: 80%"><span>80%</span></span>

</div>

<div class="progress">

<span class="blue" style="width: 100%"><span>100%</span></span>

</div>

</section>

从HTML结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。

CSS代码：

.progress {

height: 20px

background: #ebebeb

border-left: 1px solid transparent

border-right: 1px solid transparent

border-radius: 10px

}

.progress >span {

position: relative

float: left

margin: 0 -1px

min-width: 30px

height: 18px

line-height: 16px

text-align: right

background: #cccccc

border: 1px solid

border-color: #bfbfbf #b3b3b3 #9e9e9e

border-radius: 10px

background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%)

-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)

box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)

}

.progress >span >span {

padding: 0 8px

font-size: 11px

font-weight: bold

color: #404040

color: rgba(0, 0, 0, 0.7)

text-shadow: 0 1px rgba(255, 255, 255, 0.4)

}

.progress >span:before {

content: ''

position: absolute

top: 0

bottom: 0

left: 0

right: 0

z-index: 1

height: 18px

background: url("../img/progress.png") 0 0 repeat-x

border-radius: 10px

}

.progress .green {

background: #85c440

border-color: #78b337 #6ba031 #568128

background-image: -webkit-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

background-image: -moz-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

background-image: -o-linear-gradient(top, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

background-image: linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)

}

.progress .red {

background: #db3a27

border-color: #c73321 #b12d1e #8e2418

background-image: -webkit-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

background-image: -moz-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

background-image: -o-linear-gradient(top, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

background-image: linear-gradient(to bottom, #ea8a7e 0%, #e15a4a 70%, #db3a27 100%)

}

.progress .orange {

background: #f2b63c

border-color: #f0ad24 #eba310 #c5880d

background-image: -webkit-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

background-image: -moz-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

background-image: -o-linear-gradient(top, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

background-image: linear-gradient(to bottom, #f8da9c 0%, #f5c462 70%, #f2b63c 100%)

}

.progress .blue {

background: #5aaadb

border-color: #459fd6 #3094d2 #277db2

background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%)

}

---