HTML5如何实现进度条特效

2024-04-02 19:04:59 679人浏览薄情痞子

摘要

这篇文章将为大家详细讲解有关HTML5如何实现进度条特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 <！DOCTY

这篇文章将为大家详细讲解有关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（）;};};
 
    return!!（elem.getContext&&elem.getContext（'2d'））;};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如何实现进度条特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: HTML5如何实现进度条特效

本文链接: https://www.lsjlt.com/news/92017.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341