commit 6ce37f8a19a2801c8678f36b0cd51765ce52ef61 Author: dan63047 Date: Mon Jan 25 19:26:38 2021 +0300 init 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 0000000..622372f Binary files /dev/null and b/res/clockface.png differ 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