From 6ce37f8a19a2801c8678f36b0cd51765ce52ef61 Mon Sep 17 00:00:00 2001 From: dan63047 Date: Mon, 25 Jan 2021 19:26:38 +0300 Subject: [PATCH] init --- .gitignore | 1 + README.md | 1 + index.html | 73 ++++++++++++++++++++++++++ main.css | 128 ++++++++++++++++++++++++++++++++++++++++++++++ res/clockface.png | Bin 0 -> 5791 bytes script.js | 105 +++++++++++++++++++++++++++++++++++++ 6 files changed, 308 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 index.html create mode 100644 main.css create mode 100644 res/clockface.png create mode 100644 script.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..600d2d3 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..6e04e21 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +Просто сайт, который считает время до НГ, запилил чисто по фану. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7526f5b --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + Часики + + + + + + + + +
+

00:00:00.000

+

Четверг, 1 января 1970 г.

+
+
+
+
+
+
+
+

0:00:00.000

+

+ + +

+
+
+
+
+
+
+
+

0:00:00.000

+

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..3943ca7 --- /dev/null +++ b/main.css @@ -0,0 +1,128 @@ +body{ + background-color: #000; + margin: 0; + color: #fff; + font-family: "Fira Code"; +} +nav{ + display: flex; + font-weight: 300; + height: 5vh; + width: 100vw; +} +svg{ + height: 100%; + width: 100%; +} +button{ + background: none; + border: none; + color: #fff; +} +#s_start, #s_reset{ + width: 5vw; +} +.select{ + display: flex; + height: 90%; + justify-content: center; + width: inherit; + cursor: pointer; +} +.select.thing:before{ + content: ""; + height: 2px; + margin-top: 5vh; + background-color: white; + position: absolute; + width: 5%; +} +#clocks, #stopwatch, #timer{ + display: none; + text-align: center; + justify-content: center; + height: 95vh; +} +#clocks.show, #stopwatch.show, #timer.show{ + display: block; +} +.time{ + font-size: 8em; + margin: 0; +} +#main_time, #main_sw, #main_t{ + margin: 0; +} +#msec_time, #msec_sw, #msec_t{ + font-size: 2rem; + margin: 0; +} +#date{ + margin: 0; + font-size: 2em; + font-weight: 300; + justify-content: center; + display: flex; + align-items: center; +} +#timer_button{ + height: 42px; + width: 42px; +} +.timer_input{ + width: 30px; + background: none; + color: #fff; + font-family: "Fira Code"; +} +#analog, #sanalog, #tanalog{ + width: 50vmin; + height: 50vmin; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + background: url("res/clockface.png"); + background-size: cover; +} +#hour, #min, #sec, #shour, #smin, #ssec, #thour, #tmin, #tsec{ + display: flex; + position: absolute; + justify-content: center; +} +#hour, #shour, #thour{ + width: 30vmin; + height: 30vmin; +} +#min, #smin, #tmin{ + width: 40vmin; + height: 40vmin; +} +#sec, #ssec, #tsec{ + width: 45vmin; + height: 45vmin; +} +#hour::before, #shour::before, #thour::before{ + content: ""; + position: absolute; + background-color: yellow; + width: 9px; + height: 50%; + z-index: 10; +} +#min::before, #smin::before, #tmin::before{ + content: ""; + position: absolute; + width: 5px; + height: 50%; + background-color: #fff; + z-index: 11; +} +#sec::before, #ssec::before, #tsec::before{ + content: ""; + position: absolute; + width: 3px; + height: 55%; + background-color: #f00; + z-index: 12; +} \ No newline at end of file diff --git a/res/clockface.png b/res/clockface.png new file mode 100644 index 0000000000000000000000000000000000000000..622372f13578940576a155c921f317ae70cce224 GIT binary patch literal 5791 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 YvQ0K)R;A#aS5Bh?f_{1E7k>8t0G&eh<^TWy literal 0 HcmV?d00001 diff --git a/script.js b/script.js new file mode 100644 index 0000000..2b364ac --- /dev/null +++ b/script.js @@ -0,0 +1,105 @@ +var month = ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"], + day_of_week = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"], + svg_pause = '', + svg_play = '', + svg_reset = '', + stopwatch_on_pause = true, + timer_setted = false, + elapsedTime = 0, + startTime, sInterval, tInterval; + +function Clocks(){ + var now = new Date(); + document.title = "Часики - " + ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2) + ":" + ("0" + now.getSeconds()).slice(-2); + document.getElementById("main_time").innerHTML = ("0" + now.getHours()).slice(-2) + ":" + ("0" + now.getMinutes()).slice(-2) + ":" + ("0" + now.getSeconds()).slice(-2); + document.getElementById("msec_time").innerHTML = "." + ("00" + now.getMilliseconds()).slice(-3); + document.getElementById("date").innerHTML = day_of_week[now.getDay()] + ", " + now.getDate() + " " + month[now.getMonth()] + " " + now.getFullYear() + " г."; + document.getElementById("hour").style.transform = `rotateZ(${now.getHours()*30+(now.getMinutes()*6)/12+(now.getSeconds()*6)/720}deg)`; + document.getElementById("min").style.transform = `rotateZ(${now.getMinutes()*6+(now.getSeconds()*6)/60+(now.getMilliseconds()*0.36)/3600}deg)`; + document.getElementById("sec").style.transform = `rotateZ(${now.getSeconds()*6+(now.getMilliseconds()*0.36)/60}deg)`; +} +function ChangeSelect(e){ + let lal = document.getElementsByClassName("select") + for (let i = 0; i < lal.length; i++) { + const el = lal[i]; + if (el.className == "select thing"){el.classList.toggle("thing")} + } + e.classList.toggle("thing") + let lal2 = [document.getElementById("clocks"), document.getElementById("stopwatch"), document.getElementById("timer")] + for (let i = 0; i < lal2.length; i++){ + const el = lal2[i]; + if (el.className == "show"){el.classList.toggle("show")} + if (e.id.substring(1) == el.id){el.classList.toggle("show")} + + } +} +setInterval(Clocks, 1000/60) +document.getElementById("s_start").innerHTML = svg_play +document.getElementById("timer_button").innerHTML = svg_play + +function stopwatch() { + if (stopwatch_on_pause){ + startTime = Date.now() - elapsedTime; + sInterval = setInterval(function printTime() { + elapsedTime = Date.now() - startTime; + let h = Math.floor(elapsedTime/3600000); + let m = Math.floor((elapsedTime/1000/60)%60); + let s = Math.floor((elapsedTime/1000)%60); + let ms = Math.floor(elapsedTime%1000) + document.getElementById("main_sw").innerHTML = h + ":" + ("0"+m).slice(-2) + ":" + ("0"+s).slice(-2); + document.getElementById("msec_sw").innerHTML = "." + ("00"+ms).slice(-3); + document.getElementById("shour").style.transform = `rotateZ(${h*30+(m*6)/12+(s*6)/720}deg)`; + document.getElementById("smin").style.transform = `rotateZ(${m*6+(s*6)/60+(ms*0.36)/3600}deg)`; + document.getElementById("ssec").style.transform = `rotateZ(${s*6+(ms*0.36)/60}deg)`; + }, 1000/60); + document.getElementById("s_start").innerHTML = svg_pause; + stopwatch_on_pause = false + }else{ + clearInterval(sInterval); + document.getElementById("s_start").innerHTML = svg_play; + stopwatch_on_pause = true + } +} +function reset() { + clearInterval(sInterval); + document.getElementById("main_sw").innerHTML = "0:00:00"; + document.getElementById("msec_sw").innerHTML = ".000"; + document.getElementById("shour").style.transform = `rotateZ(0deg)`; + document.getElementById("smin").style.transform = `rotateZ(0deg)`; + document.getElementById("ssec").style.transform = `rotateZ(0deg)`; + elapsedTime = 0; + document.getElementById("s_start").innerHTML = svg_play; + stopwatch_on_pause = true + } +function timer(){ + if (timer_setted){ + clearInterval(tInterval); + document.getElementById("main_t").innerHTML = "0:00:00"; + document.getElementById("msec_t").innerHTML = ".000"; + document.getElementById("thour").style.transform = `rotateZ(0deg)`; + document.getElementById("tmin").style.transform = `rotateZ(0deg)`; + document.getElementById("tsec").style.transform = `rotateZ(0deg)`; + timer_setted = false; + document.getElementById("timer_button").innerHTML = svg_play; + }else{ + let timer_time = Date.now() + document.getElementById("set_timer_h").value*3600000 + document.getElementById("set_timer_m").value*60000 + document.getElementById("set_timer_s").value*1000; + tInterval = setInterval(function printTimer() { + let leftTime = timer_time - Date.now(); + if (leftTime > 0){ + let h = Math.floor(leftTime/3600000); + let m = Math.floor((leftTime/1000/60)%60); + let s = Math.floor((leftTime/1000)%60); + let ms = Math.floor(leftTime%1000) + document.getElementById("main_t").innerHTML = h + ":" + ("0"+m).slice(-2) + ":" + ("0"+s).slice(-2); + document.getElementById("msec_t").innerHTML = "." + ("00"+ms).slice(-3); + document.getElementById("thour").style.transform = `rotateZ(-${h*30+(m*6)/12+(s*6)/720}deg)`; + document.getElementById("tmin").style.transform = `rotateZ(-${m*6+(s*6)/60+(ms*0.36)/3600}deg)`; + document.getElementById("tsec").style.transform = `rotateZ(-${s*6+(ms*0.36)/60}deg)`; + }else{ + timer() + } + }, 1000/60); + timer_setted = true; + document.getElementById("timer_button").innerHTML = svg_reset; + } +} \ No newline at end of file