这篇文章将为大家详细讲解有关HTML5如何实现进度条特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
<！DOCTYPEhtml><html><head><metacharset='UTF-8'><title>HTML5有特色的进度条</title><basetarget=“_blank”/><style>body{背景：＃111;白颜色;}a{color：White;}画布{背景：＃111;边框：1px实心＃171717；显示：块；左：50％；边距：-51px00-201px;位置：绝对；最高：50％；}</style></head><body><scripttype=“text/javascript”>
varlightLoader=函数（c，cw，ch）{var_this=this;this.c=c;this.ctx=c.getContext（'2d'）;this.cw=cw;this.ch=ch;this.loaded=0;this.loaderSpeed=0.6;this.loaderHeight=10;this.loaderWidth=310;this.loader={x：（this.cw/2）-（this.loaderWidth/2），y：（this.ch/2）-（this.loaderHeight/2）};this.particles=[];this.particleLift=180;this.hueStart=0this.hueEnd=120;this.hue=0;this.gravity=.15;this.particleRate=4;/*========================================================*//*初始化
/*========================================================*/this.init=function（）{this.loop（）;};/*========================================================*//*实用程序功能/*====================================/=。============*/this.rand=function（rMi，rMa）{return〜〜（（（Math.random（）*（rMa-rMi+1））+rMi）;};this.hitTest=函数（x1，y1，w1，h2，x2，y2，w2，h3）{return！（x1+w1<x2||x2+w2<x1||y1+h2<y2||y2+h3<y1）;};/*========================================================*//*更新加载程序/*========================================================*/this.updateLoader=function（）{if（this.loaded<100）{
this.loaded+=this.loaderSpeed;}else{this.loaded=0;}};/*========================================================*//*渲染加载器/*=================================*/this.renderLoader=function（）{this.ctx.fillStyle='＃000';======================*/this.ctx.fillRect（this.loader.x，this.loader.y，this.loaderWidth，this.loaderHeight）;this.hue=this.hueStart+（this.loaded/100）*（this.hueEnd-this.hueStart）;varnewWidth=（this.loaded/100）*this.loaderWidth;this.ctx.fillStyle='hsla（'+this.hue+'，100％，40％，1）';this.ctx.fillRect（this.loader.x，this.loader.y，newWidth，this.loaderHeight）;this.ctx.fillStyle='＃222';
this.ctx.fillRect（this.loader.x，this.loader.y，newWidth，this.loaderHeight/2）;};/*========================================================*//*粒子/*========================================================*/this.Particle=function（）{this.x=_this.loader.x+（（__this.loaded/100）*_this.loaderWidth）-_this.rand（0，1）;this.y=_this.ch/2+_this.rand（0，_this.loaderHeight）-_this.loaderHeight/2;this.vx=（_this.rand（0，4）-2）/100;this.vy=（_this.rand（0，_this.particleLift）-_this.particleLift*2）/100;this.width=_this.rand（1，4）/2;this.height=_this.rand（1，4）/2;this.hue=_this.hue;};
this.Particle.prototype.update=function（i）{this.vx+=（_this.rand（0，6）-3）/100;this.vy+=_this.gravity;this.x+=this.vx;this.y+=this.vy;如果（this.y>_this.ch）{_this.particles.splice（i，1）;}};this.Particle.prototype.render=function（）{_this.ctx.fillStyle='hsla（'+this.hue+'，100％，'+_this.rand（50，70）+'％，'+_this。rand（20，100）/100+'）';_this.ctx.fillRect（this.x，this.y，this.width，this.height）;};this.createParticles=function（）{vari=this.particleRate;而（i--）{this.particles.push（newthis.Particle（））;};};this.updateParticles=function（）{
vari=this.particles.length;而（i--）{varp=this.particles[i];p.update（i）;};};this.renderParticles=function（）{vari=this.particles.length;而（i--）{varp=this.particles[i];p.render（）;};};</p><p>/*==========================================================*//*透明画布/*=======================================================*/this.clearCanvas=function（）{this.ctx.globalCompositeOperation='source-过度';this.ctx.clearRect（0，0，this.cw，this.ch）;this.ctx.globalCompositeOperation='更轻';};/*========================================================*/
/*动画循环/*========================================================*//this.loop=function（）{varloopIt=function（）{requestAnimationFrame（loopIt，_this.c）;_this.clearCanvas（）;_this.createParticles（）;_this.updateLoader（）;_this.updateParticles（）;_this.renderLoader（）;_this.renderParticles（）;};loopIt（）;};};/*========================================================*//*检查画布支持/*=================================/=varisCanvasSupported=function（）{varelem=document.createElement（'canvas'）;======================*/
return!!（elem.getContext&&elem.getContext（'2d'））;};/*========================================================*//*设置requestAnimationFrame/*=================================*/varsetupRAF=function（）{varlastTime=0;======================*/varvendor=['ms'，'moz'，'webkit'，'o'];for（varx=0;x<vendor.length&&！window.requestAnimationFrame;++x）{window.requestAnimationFrame=window[vendors[x]+'RequestAnimationFrame'];window.cancelAnimationFrame=window[vendors[x]+'CancelAnimationFrame']||window[vendors[x]+'CancelRequestAnimationFrame'];};if（！window.requestAnimationFrame）{窗口。
varcurrTime=newDate（）。getTime（）;vartimeToCall=Math.max（0，16-（currTime-lastTime））;varid=window.setTimeout（function（）{callback（currTime+timeToCall）;}，timeToCall）;lastTime=currTime+timeToCall;返回ID；};};如果（！window.cancelAnimationFrame）{window.cancelAnimationFrame=函数（id）{clearTimeout（id）;};};};/*========================================================*//*定义画布并初始化/*=======================================================*//如果（isCanvasSupported）{varc=document.createElement（'canvas'）;c.width=400;c。高度=100;
varcw=c.width;varch=c.height;document.body.appendChild（c）;varcl=newlightLoader（c，cw，ch）;setupRAF（）;cl.init（）;}</script><divstyle=“position：absolute;top：0;width：100％”><divclass=“footer-banner”style=“width：728px;margin：10pxauto;color：White”>HTML5进度条请使用支持HTML5的浏览器查看本页</div></div></body></html>关于“HTML5如何实现进度条特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
