使用svg实现动态时钟效果

2023-09-10 05:31:05 56

SVGclock

#clock{ stroke:#adcd3c; stroke-linecap:round; fill:#f2fddb; } #face{ stroke-width:3px; } #ticks{ stroke-width:2px; } #handsline{ stroke-linejoin:bevel; } #hourhand{ stroke-width:4px; } #minutehand{ stroke-width:3px; } #numbers{ font-size:16px; text-anchor:middle; stroke:none; fill:#92b0dd; } functionupdateTime(){ varnow=newDate(); varsecond=now.getSeconds(); varmin=now.getMinutes(); varhour=(now.getHours()%12)+min/60; varsecondangle=second*6;//6degreesforeveryminute varminangle=min*6;//6degreesforeveryminute varhourangle=hour*30;//30degreesforeveryhour varminhand=document.getElementById('minutehand'); varhourhand=document.getElementById('hourhand'); varsecondhand=document.getElementById('secondhand'); varshadhand=document.getElementById("shadow"); varclocks=document.getElementById("clock"); if(second%2==0){ //alert(clocks); clocks.style.stroke="#adcd3c"; }else{ //alert(secondangle); clocks.style.stroke="#ad223c"; } minhand.setAttribute('transform','rotate('+minangle+',50,50)'); hourhand.setAttribute('transform','rotate('+hourangle+',50,50)'); secondhand.setAttribute('transform','rotate('+secondangle+',50,50)'); for(vari=shadhand.childElementCount-1;i>=0;i--){ varchr=shadhand.children[i]; switch(chr.tagName) { case"feGaussianBlur": /*if(secondangle/2)==1){ chr.setAttribute(dx=-1) }else{ chr.setAttribute(dx=1) } alert(chr.tagName);*/ break; case"feOffset": if(second%2==0){ //alert(secondangle); chr.setAttribute("dx","-3"); }else{ //alert(secondangle); chr.setAttribute("dx","3"); } //alert(chr.tagName); break; case"feMerge": /*for(vari=0;i

12 3 6 9

使用svg实现动态时钟效果

热门推荐

随机推荐