|
#2
不懂才问2015-05-21 14:45
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title></title>
<style>
#clock { stroke: black; stroke-linecap:square; fill: #fcfcfc; width: 500px; height: 500px; }
#face { stroke-width: 2px; }
#ticks { stroke-width: 1px; }
#hour { stroke-width: 3px; stroke: #000; }
#minute { stroke-width: 2px; stroke: #333; }
#second { stroke-width: 1px; stroke: #f23; }
#numbers { font-family: sans-serif; font-size: 8px; font-weight: bold; text-anchor: middle; stroke: none; fill: black; }
</style>
</head>
<body>
<svg id="clock" viewBox="0 0 100 100">
<circle id="face" cx="50" cy="50" r="45" />
<g id="ticks">
<line x1="50.00" y1="5.000" x2="50.00" y2="10.00" />
<line x1="72.50" y1="11.03" x2="70.00" y2="15.36" />
<line x1="88.97" y1="27.50" x2="84.64" y2="30.00" />
<line x1="95.00" y1="50.00" x2="90.00" y2="50.00" />
<line x1="88.97" y1="72.50" x2="84.64" y2="70.00" />
<line x1="72.50" y1="88.97" x2="70.00" y2="84.64" />
<line x1="50.00" y1="95.00" x2="50.00" y2="90.00" />
<line x1="27.50" y1="88.97" x2="30.00" y2="84.64" />
<line x1="11.03" y1="72.50" x2="15.36" y2="70.00" />
<line x1="5.000" y1="50.00" x2="10.00" y2="50.00" />
<line x1="11.03" y1="27.50" x2="15.36" y2="30.00" />
<line x1="27.50" y1="11.03" x2="30.00" y2="15.36" />
</g>
<g id="numbers">
<text x="50" y="18">12</text>
<text x="85" y="53">3</text>
<text x="50" y="88">6</text>
<text x="15" y="53">9</text>
</g>
<g id="hands">
<line id="hour" x1="50" y1="50" x2="50" y2="24" />
<line id="minute" x1="50" y1="50" x2="50" y2="20" />
<line id="second" x1="50" y1="50" x2="50" y2="16" />
</g>
</svg>
<script>
setInterval(function () {
var now = new Date(), min = now.getMinutes(), hour = now.getHours(), sec = now.getSeconds(),
mangle = min * 6, hangle = (hour + min / 60) * 30, sangle = sec * 6,
mhand = document.getElementById('minute'), hhand = document.getElementById('hour'), shand = document.getElementById('second');
hhand.setAttribute('transform', 'rotate(' + hangle + ',50,50)');
mhand.setAttribute('transform', 'rotate(' + mangle + ',50,50)');
shand.setAttribute('transform', 'rotate(' + sangle + ',50,50)');
}, 1000);
</script>
</body>
</html>
