Skip to content

Commit e880d1b

Browse files
CzytelnyNickCzytelnyNick
committed
Final?
0 parents  commit e880d1b

File tree

4 files changed

+177
-0
lines changed

4 files changed

+177
-0
lines changed

‎main.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.circle
2+
{
3+
height: 500px;
4+
width: 530px;
5+
/* box-shadow: 2px 2px black; */
6+
border-radius: 100%;
7+
border: 1px solid black;
8+
position: relative;
9+
top: 100px;
10+
left: 750px;
11+
transform: rotate(-90deg);
12+
}
13+
.min
14+
{
15+
position: absolute;
16+
top: 250px;
17+
left: 250px;
18+
width: 230px;
19+
height: 0.1px;
20+
border: 2px solid black;
21+
background-color: black;
22+
transform-origin: bottom left;
23+
}
24+
.h
25+
{
26+
position: absolute;
27+
left: 250px;
28+
top: 250px;
29+
width: 150px;
30+
height: 1px;
31+
border: 2px solid red;
32+
background: red;
33+
transform-origin: bottom left;
34+
}
35+
.sec
36+
{
37+
transform-origin: bottom left;
38+
39+
position: absolute;
40+
left: 250px;
41+
top: 250px;
42+
width: 230px;
43+
height: 0.02px;
44+
border: 1px solid blue;
45+
background-color: blue;
46+
}
47+
.btn
48+
{
49+
width: 100px;
50+
height: 100px;
51+
}
52+
.dot
53+
{
54+
position: absolute;
55+
left: 242.5px;
56+
top: 247px;
57+
width: 10px;
58+
height: 10px;
59+
60+
border: 2px solid green;
61+
background-color: green;
62+
border-radius: 50%;
63+
}
64+
65+
.clock
66+
{
67+
position: absolute;
68+
left: -100px;
69+
top: -95px;
70+
height:700px;
71+
width: 700px;
72+
}

‎main.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>Page Title</title>
7+
<meta name='viewport' content='width=device-width, initial-scale=1'>
8+
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
9+
<link href="https://pl.allfont.net/allfont.css?fonts=ds-digital-bold" rel="stylesheet" type="text/css" />
10+
<style>
11+
#cyfrowy
12+
{
13+
font-family: 'DS-Digital Bold', arial;
14+
font-size: 48px;
15+
text-shadow: 4px 4px 4px #aaa;
16+
position: absolute;
17+
left: 250px;
18+
top: 350px;
19+
font-size: 100px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div class="circle">
25+
<img class="clock" src="tarcza.png" style="transform:rotate(90deg)"">
26+
<div class="sec"></div>
27+
<div class="min"></div>
28+
<div class="h"></div>
29+
<div class="dot"></div>
30+
</div>
31+
32+
<p id="cyfrowy"></p>
33+
34+
<script src='main.js'></script>
35+
</body>
36+
</html>

‎main.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
p = document.querySelector("p")
2+
h = document.querySelector(".h")
3+
min = document.querySelector(".min")
4+
sec = document.querySelector(".sec")
5+
btn = document.querySelector(".btn")
6+
7+
8+
function ustawCzas(){
9+
let time = new Date()
10+
var timeH;
11+
if(time.getHours() < 10)
12+
{
13+
timeH = "0" + time.getHours();
14+
}
15+
else
16+
{
17+
timeH = time.getHours()
18+
}
19+
20+
if(time.getMinutes() < 10)
21+
{
22+
timeM = "0" + time.getMinutes();
23+
}
24+
else
25+
{
26+
timeM = time.getMinutes()
27+
}
28+
29+
if(time.getSeconds() < 10)
30+
{
31+
timeS = "0" + time.getSeconds();
32+
}
33+
else
34+
{
35+
timeS = time.getSeconds()
36+
}
37+
p.innerHTML = timeH + ":" + timeM + ":" + timeS
38+
}
39+
40+
41+
setInterval(() => {
42+
ustawCzas()
43+
// h.style.transform = "rotate(-180deg)"
44+
let data = new Date()
45+
let cyfH = data.getHours
46+
let cyfM = data.getMinutes
47+
let cyfS = data.getSeconds
48+
sec.style.transform = `rotate(180deg)`;
49+
50+
hours = data.getHours() * 30
51+
minutes = (data.getMinutes() * 6) + 1
52+
seconds = (data.getSeconds() * 6)
53+
// if(data.getSeconds() > 0 && seconds <= )
54+
// {
55+
// sec.style.transform = `rotate(90deg)`;
56+
// }
57+
console.log(seconds);
58+
h.style.transform = `rotate(${hours}deg)`
59+
sec.style.transform = `rotate(${seconds}deg)`
60+
min.style.transform = `rotate(${minutes}deg)`
61+
62+
}, 1000);
63+
64+
65+
// btn.addEventListener("click", () =>{
66+
// i = i + 3
67+
// h.style.transform = `rotate(${i}deg)`
68+
// })
69+

‎tarcza.png

8.75 KB
Loading

0 commit comments

Comments
 (0)