141 lines
4.9 KiB
HTML
141 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="440" height="480"
|
||
|
|
viewBox="-110 -120 220 240">
|
||
|
|
<defs>
|
||
|
|
<line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
|
||
|
|
<line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
|
||
|
|
<g id="bloc" viewbox="-100 -100 200 200">
|
||
|
|
<use href="#heure"/>
|
||
|
|
<use href="#minute" transform="rotate( 6)"/>
|
||
|
|
<use href="#minute" transform="rotate(12)"/>
|
||
|
|
<use href="#minute" transform="rotate(18)"/>
|
||
|
|
<use href="#minute" transform="rotate(24)"/>
|
||
|
|
</g>
|
||
|
|
</defs>
|
||
|
|
<!--<rect fill="yellow" x="-130" y="-150" width="450" height="310"/>-->
|
||
|
|
<use href="#bloc" transform="rotate( 0)"/>
|
||
|
|
<use href="#bloc" transform="rotate( 30)"/>
|
||
|
|
<use href="#bloc" transform="rotate( 60)"/>
|
||
|
|
<use href="#bloc" transform="rotate( 90)"/>
|
||
|
|
<use href="#bloc" transform="rotate(120)"/>
|
||
|
|
<use href="#bloc" transform="rotate(150)"/>
|
||
|
|
<use href="#bloc" transform="rotate(180)"/>
|
||
|
|
<use href="#bloc" transform="rotate(210)"/>
|
||
|
|
<use href="#bloc" transform="rotate(240)"/>
|
||
|
|
<use href="#bloc" transform="rotate(270)"/>
|
||
|
|
<use href="#bloc" transform="rotate(300)"/>
|
||
|
|
<use href="#bloc" transform="rotate(330)"/>
|
||
|
|
|
||
|
|
<line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" id="aiguillem" transform="rotate(192)"/>
|
||
|
|
<line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" id="aiguilleh" transform="rotate(76)"/>
|
||
|
|
|
||
|
|
<circle cx="0" cy="0" r="6" fill="black"/>
|
||
|
|
|
||
|
|
<g text-anchor="middle">
|
||
|
|
<g transform="rotate(210)">
|
||
|
|
<text y="70" transform="rotate(-210 0 65)">1</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(240)">
|
||
|
|
<text y="70" transform="rotate(-240 0 65)">2</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(270)">
|
||
|
|
<text y="70" transform="rotate(-270 0 65)">3</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(300)">
|
||
|
|
<text y="70" transform="rotate(-300 0 65)">4</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(330)">
|
||
|
|
<text y="70" transform="rotate(-330 0 65)">5</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(0)">
|
||
|
|
<text y="70" transform="rotate(-0 0 65)">6</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(30)">
|
||
|
|
<text y="70" transform="rotate(-30 0 65)">7</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(60)">
|
||
|
|
<text y="70" transform="rotate(-60 0 65)">8</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(90)">
|
||
|
|
<text y="70" transform="rotate(-90 0 65)">9</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(120)">
|
||
|
|
<text y="70" transform="rotate(-120 0 65)">10</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(150)">
|
||
|
|
<text y="70" transform="rotate(-150 0 65)">11</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(180)">
|
||
|
|
<text y="70" transform="rotate(-180 0 65)">12</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<g text-anchor="middle" font-size="12">
|
||
|
|
<g transform="rotate(210)">
|
||
|
|
<text y="115" transform="rotate(-210 0 110)">5</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(240)">
|
||
|
|
<text y="115" transform="rotate(-240 0 110)">10</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(270)">
|
||
|
|
<text y="115" transform="rotate(-270 0 110)">15</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(300)">
|
||
|
|
<text y="115" transform="rotate(-300 0 110)">20</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(330)">
|
||
|
|
<text y="115" transform="rotate(-330 0 110)">25</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate( 0)">
|
||
|
|
<text y="115" >30</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate( 30)">
|
||
|
|
<text y="115" transform="rotate(-30 0 110)">35</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate( 60)">
|
||
|
|
<text y="115" transform="rotate(-60 0 110)">40</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate( 90)">
|
||
|
|
<text y="115" transform="rotate(-90 0 110)">45</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(120)">
|
||
|
|
<text y="115" transform="rotate(-120 0 110)">50</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(150)">
|
||
|
|
<text y="115" transform="rotate(-150 0 110)">55</text>
|
||
|
|
</g>
|
||
|
|
<g transform="rotate(180)">
|
||
|
|
<text y="115" transform="rotate(-180 0 110)">00</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<p>
|
||
|
|
Heures : <input type="range" min="0" max="12" value="2" class="slider heure" /><br/>
|
||
|
|
Minutes : <input type="range" min="0" max="60" value="32" class="slider minute" />
|
||
|
|
</p>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
const inputh = document.querySelector("input.heure");
|
||
|
|
const inputm = document.querySelector("input.minute");
|
||
|
|
const aiguilleh = document.getElementById("aiguilleh");
|
||
|
|
const aigiullem = document.getElementById("aiguillem");
|
||
|
|
|
||
|
|
function Show() {
|
||
|
|
aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
|
||
|
|
aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
|
||
|
|
}
|
||
|
|
|
||
|
|
inputm.oninput = Show;
|
||
|
|
inputh.oninput = Show;
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|