nyymix/js-clock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add clock-face

Browse source
This commit is contained in:
Nyymix 2022-04-25 09:22:37 +03:00
parent b60c9ab1bb
commit 4277bd0384
2 changed files with 93 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html
View file

@ -5,10 +5,27 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<title>Document</title> <title>Clock</title>
</head> </head>
<body> <body>
<div class="clock">
<div class="dot"></div>
<div class="hands hrs" id="hrs"></div>
<div class="hands min" id="min"></div>
<div class="hands sek" id="sek"></div>
<div class="nums n01">I</div>
<div class="nums n02">II</div>
<div class="nums n03">III</div>
<div class="nums n04">IV</div>
<div class="nums n05">V</div>
<div class="nums n06">VI</div>
<div class="nums n07">VII</div>
<div class="nums n08">VIII</div>
<div class="nums n09">IX</div>
<div class="nums n10">X</div>
<div class="nums n11">XI</div>
<div class="nums n12">XII</div>
</div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

74
main.css
View file

@ -0,0 +1,74 @@
body {
background-color: #e5e5e5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.clock {
width: 300px;
height: 300px;
background-color: #adadad;
border-radius: 50%;
border: 1px solid black;
position: relative;
}
.clock .nums {
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: medium;
}
.clock .n01 {
--rotation: 30deg;
}
.clock .n02 {
--rotation: 60deg;
}
.clock .n03 {
--rotation: 90deg;
}
.clock .n04 {
--rotation: 120deg;
}
.clock .n05 {
--rotation: 150deg;
}
.clock .n06 {
--rotation: 180deg;
}
.clock .n07 {
--rotation: 210deg;
}
.clock .n08 {
--rotation: 240deg;
}
.clock .n09 {
--rotation: 270deg;
}
.clock .n10 {
--rotation: 300deg;
}
.clock .n11 {
--rotation: 330deg;
}
.clock .n12 {
--rotation: 360deg;
}