Membuat Widget Waktu dengan SVG dan JavaScript

Template sicklon 2017-03-29 09.13.2211955.0 / 1

Perkiraan artikel ini membutuhkan Menit dengan membaca 288 Kata.

Menggunakan JavaScript dikombinasikan dengan Grafis Vektor memungkinkan mendapatkan hasil yang sangat menarik. Keuntungan dari grafis vektor lebih raster di skalabilitas. Ketika gambar diperbesar, tidak berubah. Hal ini sangat berguna jika template anda responsive. Berikut adalah contoh SVG-animasi dalam bentuk jam analog by webmaster-ucoz.ru.

Masukan Kode yang ingin munculkan Jam.

<div class="filler"></div>
<svg width="200" height="200">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="2.5" dy="2.5"/>
</filter>
     <g>
<circle id="shadow" style="fill:rgba(0,0,0,0.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"></circle>
<circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF" cx="100" cy="100" r="80"></circle>
     </g>
     <g>
<line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width: 3px; stroke: #fffbf9;" id="hourhand">
<animatetransform attributeName="transform"
     attributeType="XML"
     type="rotate"
     dur="43200s"
     repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px; stroke: #fdfdfd;" id="minutehand">
<animatetransform attributeName="transform"
     attributeType="XML"
     type="rotate"
     dur="3600s"
     repeatCount="indefinite"/>
</line>
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px; stroke: #C1EFED;" id="secondhand">
     <animatetransform attributeName="transform"
     attributeType="XML"
     type="rotate"
     dur="60s"
     repeatCount="indefinite"/>
</line>
     </g>
<circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="100" cy="100" r="3"></circle>
     </svg>

Masukan Kode ini dibawah footer:

<script src='/js/SVG-Clock.js'></script>

<script>var hands = [];
     hands.push(document.querySelector('#secondhand > *'));
     hands.push(document.querySelector('#minutehand > *'));
     hands.push(document.querySelector('#hourhand > *'));

     var cx = 100;
     var cy = 100;

     function shifter(val) {
     return [val, cx, cy].join(' ');
     }

     var date = new Date();
     var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
     var minuteAngle = 360 * date.getMinutes() / 60;
     var secAngle = 360 * date.getSeconds() / 60;

     hands[0].setAttribute('from', shifter(secAngle));
     hands[0].setAttribute('to', shifter(secAngle + 360));
     hands[1].setAttribute('from', shifter(minuteAngle));
     hands[1].setAttribute('to', shifter(minuteAngle + 360));
     hands[2].setAttribute('from', shifter(hoursAngle));
     hands[2].setAttribute('to', shifter(hoursAngle + 360));

     for(var i = 1; i <= 12; i++) {if (window.CP.shouldStopExecution(1)){break;}
     var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
     el.setAttribute('x1', '100');
     el.setAttribute('y1', '30');
     el.setAttribute('x2', '100');
     el.setAttribute('y2', '40');
     el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)');
     el.setAttribute('style', 'stroke: #ffffff;');
     document.querySelector('svg').appendChild(el);
     }
     window.CP.exitedLoop(1);
</script>