mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SVG Clock</title>
|
|
<style>#root {margin:auto;max-width:600px;width:100%;}</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script src="../../mithril.js"></script>
|
|
<script>
|
|
var clock = m("svg[viewBox='0 0 300 300'][xmlns='http://www.w3.org/2000/svg'][xmlns:xlink='http://www.w3.org/1999/xlink']", [
|
|
m("g[transform='translate(150,150)']", [
|
|
m("g", [
|
|
m("circle[fill='none'][r='108'][stroke='gray'][stroke-width='4']"),
|
|
m("circle[fill='none'][r='97'][stroke='black'][stroke-dasharray='4,46.789082'][stroke-width='11'][transform='rotate(-1.5)']"),
|
|
m("circle[fill='none'][r='100'][stroke='black'][stroke-dasharray='2,8.471976'][stroke-width='5'][transform='rotate(-.873)']")
|
|
]),
|
|
m("g[id='hands'][transform='rotate(180)']", [
|
|
m("g[id='hour']", [
|
|
m("line[opacity='.5'][stroke='blue'][stroke-linecap='round'][stroke-width='5'][y2='75']"),
|
|
m("animateTransform[attributeName='transform'][by='360'][dur='12h'][repeatCount='indefinite'][type='rotate']"),
|
|
m("circle[r='7']")
|
|
]),
|
|
m("g[id='minute']", [
|
|
m("line[opacity='.9'][stroke='green'][stroke-linecap='round'][stroke-width='4'][y2='93']"),
|
|
m("animateTransform[attributeName='transform'][by='360'][dur='60min'][repeatCount='indefinite'][type='rotate']"),
|
|
m("circle[fill='red'][r='6']")
|
|
]),
|
|
m("g[id='second']", [
|
|
m("line[stroke='red'][stroke-linecap='round'][stroke-width='2'][y1='-20'][y2='102']"),
|
|
m("animateTransform[attributeName='transform'][by='360'][dur='60s'][repeatCount='indefinite'][type='rotate']"),
|
|
m("circle[fill='blue'][r='4']")
|
|
])
|
|
])
|
|
]),
|
|
m("script", [
|
|
"function setClock() {" +
|
|
" var date = new Date();" +
|
|
" var h = parseInt(date.getHours());" +
|
|
" h = h > 12 ? h-12: h;" +
|
|
" var m = parseInt(date.getMinutes());" +
|
|
" var s = parseInt(date.getSeconds());" +
|
|
"" +
|
|
" var second = 6*s;" +
|
|
" var minute =(m+s/60)*6;" +
|
|
" var hour = (h+m/60+s/3600)*30;" +
|
|
"" +
|
|
" var hourHand = document.getElementById('hour');" +
|
|
" var minuteHand = document.getElementById('minute');" +
|
|
" var secondHand = document.getElementById('second');" +
|
|
"" +
|
|
" hourHand.setAttribute('transform','rotate('+ hour.toString() +')');" +
|
|
" minuteHand.setAttribute('transform','rotate('+ minute.toString() +')');" +
|
|
" secondHand.setAttribute('transform','rotate('+ second.toString() +')');" +
|
|
"};" +
|
|
"setClock();"
|
|
]),
|
|
])
|
|
|
|
m.render(document.getElementById("root"), [clock])
|
|
</script>
|
|
</body>
|
|
</html>
|