各位老铁们，大家好，今天由我来为大家分享jquery setinterval用法，以及jqueryforeach用法的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
css的animation、jquery的animation和setInterval制作动画区别有哪些
css动画更加平滑，但是浏览器可能兼容性稍微差点
jqueryanimation和setinterval通过轮询修改特性，浏览器没有做优化
如何用canvas绘制钟表
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>HTML5timer</title>
<scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.clocks{height:500px;margin:25pxauto;position:relative;width:500px;}</style></head><body><header><h2>HTML5timer</h2></header><divclass="clocks"><canvasid="canvas"width="500"height="500"></canvas></div></body></html>
<script>varcanvas,ctx;
varclockRadius=250;varclockImage;
functionclear(){ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);}functiondrawScene(){clear();vardate=newDate();varhours=date.getHours();varminutes=date.getMinutes();varseconds=date.getSeconds();hours=hours>12?hours-12:hours;varhour=hours+minutes/60;varminute=minutes+seconds/60;ctx.save();ctx.drawImage(clockImage,0,0,500,500);ctx.translate(canvas.width/2,canvas.height/2);ctx.beginPath();ctx.font='36pxArial';ctx.fillStyle='#000';ctx.textAlign='center';ctx.textBaseline='middle';for(varn=1;n<=12;n++){vartheta=(n-3)*(Math.PI*2)/12;varx=clockRadius*0.9*Math.cos(theta);vary=clockRadius*0.9*Math.sin(theta);ctx.fillText(n,x,y);}ctx.save();vartheta=(hour-3)*2*Math.PI/12;ctx.rotate(theta);ctx.beginPath();ctx.moveTo(-15,-5);ctx.lineTo(-15,5);ctx.lineTo(clockRadius*0.5,1);ctx.lineTo(clockRadius*0.5,-1);ctx.fill();ctx.restore();ctx.save();vartheta=(minute-15)*2*Math.PI/60;ctx.rotate(theta);ctx.beginPath();ctx.moveTo(-15,-4);ctx.lineTo(-15,4);ctx.lineTo(clockRadius*0.8,1);ctx.lineTo(clockRadius*0.8,-1);ctx.fill();ctx.restore();ctx.save();vartheta=(seconds-15)*2*Math.PI/60;ctx.rotate(theta);ctx.beginPath();ctx.moveTo(-15,-3);ctx.lineTo(-15,3);ctx.lineTo(clockRadius*0.9,1);ctx.lineTo(clockRadius*0.9,-1);ctx.fillStyle='#0f0';ctx.fill();ctx.restore();ctx.restore();ctx.beginPath();//画笔开始ctx.lineWidth=5;//设置画笔的线宽ctx.strokeStyle="blue";//设置画笔的颜色ctx.arc(250,250,248,0,360,false);//绘制圆形，坐标250,250半径200，整圆（0-360度），false表示顺时针ctx.stroke();//绘图ctx.closePath();//结束画布}$(function(){canvas=document.getElementById('canvas');ctx=canvas.getContext('2d');clockImage=newImage();setInterval(drawScene,1000);});</script>
好了，文章到此结束，希望可以帮助到大家。
