init
This commit is contained in:
commit
6ce37f8a19
|
|
@ -0,0 +1 @@
|
|||
.vscode
|
||||
|
|
@ -0,0 +1 @@
|
|||
Просто сайт, который считает время до НГ, запилил чисто по фану.
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Часики</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<div class="select thing" id="vclocks" onclick="ChangeSelect(this)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
|
||||
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="select" id="vstopwatch" onclick="ChangeSelect(this)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-stopwatch" viewBox="0 0 16 16">
|
||||
<path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z"/>
|
||||
<path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354a.512.512 0 0 1-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5zM8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="select" id="vtimer" onclick="ChangeSelect(this)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
|
||||
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="clocks" class="show">
|
||||
<h1 class="time"><a id="main_time">00:00:00</a><small id="msec_time">.000</small></h1>
|
||||
<h4 id="date">Четверг, 1 января 1970 г.</h4>
|
||||
<div id="analog">
|
||||
<div id="hour"></div>
|
||||
<div id="min"></div>
|
||||
<div id="sec"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="stopwatch">
|
||||
<h1 class="time"><a id="main_sw">0:00:00</a><small id="msec_sw">.000</small></h1>
|
||||
<h4 id="date">
|
||||
<button id="s_start" onclick="stopwatch()">
|
||||
|
||||
</button>
|
||||
<button id="s_reset" onclick="reset()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</h4>
|
||||
<div id="sanalog">
|
||||
<div id="shour"></div>
|
||||
<div id="smin"></div>
|
||||
<div id="ssec"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="timer">
|
||||
<h1 class="time"><a id="main_t">0:00:00</a><small id="msec_t">.000</small></h1>
|
||||
<h4 id="date"><input name="h" class="timer_input" type="number" id="set_timer_h" value="0" min="0"/><label for="h">ч.</label><input name="m" class="timer_input" type="number" id="set_timer_m" value="5" min="0" max="59"/><label for="m">мин.</label><input name="s" class="timer_input" type="number" id="set_timer_s" value="0" min="0" max="59"/><label for="s">сек.</label><button id="timer_button" onclick="timer()"></button></h4>
|
||||
<div id="tanalog">
|
||||
<div id="thour"></div>
|
||||
<div id="tmin"></div>
|
||||
<div id="tsec"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -0,0 +1,105 @@
|
|||
var month = ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"],
|
||||
day_of_week = ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
|
||||
svg_pause = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-pause-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z"/></svg>',
|
||||
svg_play = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/></svg>',
|
||||
svg_reset = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>',
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue