Часы на SVG и Javascript
|
1 2 3 4 5 6 7 |
#svgid { display: block; margin-left: 100px; } .filler { background: #20B7AF; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="filler"></div> <svg height="200" width="200" id="svgid"> <filter height="140%" id="innerShadow" width="140%" x="-20%" y="-20%"> <fegaussianblur in="SourceGraphic" result="blur" stddeviation="3"></fegaussianblur> <feoffset dx="2.5" dy="2.5" in="blur"></feoffset> </filter> <g> <circle cx="97" cy="100" filter="url(#innerShadow)" id="shadow" r="87" style="fill:rgba(0,0,0,0.1)"></circle> <circle cx="100" cy="100" id="circle" r="80" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF"></circle> </g> <g> <line id="hourhand" style="stroke-width: 3px; stroke: #fffbf9;" transform="rotate(80 100 100)" x1="100" x2="100" y1="100" y2="55"> <animatetransform attributename="transform" attributetype="XML" dur="43200s" repeatcount="indefinite" type="rotate"></animatetransform> </line> <line id="minutehand" style="stroke-width: 4px; stroke: #fdfdfd;" x1="100" x2="100" y1="100" y2="40"> <animatetransform attributename="transform" attributetype="XML" dur="3600s" repeatcount="indefinite" type="rotate"></animatetransform> </line> <line id="secondhand" style="stroke-width: 2px; stroke: #C1EFED;" x1="100" x2="100" y1="100" y2="30"> <animatetransform attributename="transform" attributetype="XML" dur="60s" repeatcount="indefinite" type="rotate"></animatetransform> </line> </g> <circle cx="100" cy="100" id="center" r="3" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;"></circle></svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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++) { 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); } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
