Init my site
This commit is contained in:
commit
da2c21c128
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Chrome against localhost",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
Просто сайт, который считает время до НГ, запилил чисто по фану.
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||||
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" type="text/css" href="main.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||||
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav mr-auto">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" data-toggle="modal" href='#about'>О странице</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link" data-toggle="modal" href='#'
|
||||||
|
onclick="$('nav').css('display', 'none')">Скрыть nav</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="nav-link disabled" id="clocks" href="#">Сейчас ...</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="modal" tabindex="-1" role="dialog" id="about">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">О странице</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p>Локальный сайт для отчета времени</p>
|
||||||
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#debug"
|
||||||
|
aria-expanded="false" aria-controls="collapseExample">
|
||||||
|
Дебаг информация
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
<div class="collapse" id="debug">
|
||||||
|
<div class="card card-body">
|
||||||
|
Конечная дата для таймера: <span id="endtime"></span><br>
|
||||||
|
Осталось миллисекунд: <span id="left"></span><br>
|
||||||
|
Полный таймер: <span id="fulltimer"></span>
|
||||||
|
Цвет фона: <span id="bghex"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="countdown-title">До нового <span id="future_year"></span> года осталось:</h1>
|
||||||
|
<div id="countdown" class="countdown">
|
||||||
|
<div class="countdown-inner">
|
||||||
|
<span class="didts" id="num1"></span><br>
|
||||||
|
<span class="didts-text" id="text-num1"></span>
|
||||||
|
</div>
|
||||||
|
<div class="countdown-inner"><span id="separator">  :  </span></div>
|
||||||
|
<div class="countdown-inner">
|
||||||
|
<span class="didts" id="num2"></span><br>
|
||||||
|
<span class="didts-text" id="text-num2"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="congrats">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||||
|
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
|
||||||
|
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script type="text/javascript" src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-title {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 40px;
|
||||||
|
margin: 40px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
font-family: "Open Sans";
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
height: 60vh;
|
||||||
|
width: max-content;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
#congrats{
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.countdown-inner {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
.captions{
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.didts {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.didts-text {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.didts-text:first-child{
|
||||||
|
padding-right: 50%;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
function DateTime() {
|
||||||
|
var dateNow = new Date(),
|
||||||
|
ms = new Date(),
|
||||||
|
year = dateNow.getFullYear(),
|
||||||
|
jsmonth = dateNow.getMonth(),
|
||||||
|
month = [],
|
||||||
|
day = dateNow.getDate(),
|
||||||
|
hour = dateNow.getHours(),
|
||||||
|
minutes = dateNow.getMinutes(),
|
||||||
|
second = dateNow.getSeconds(),
|
||||||
|
d = document.getElementById('clocks');
|
||||||
|
|
||||||
|
month[0] = "января";
|
||||||
|
month[1] = "февраля";
|
||||||
|
month[2] = "марта";
|
||||||
|
month[3] = "апреля";
|
||||||
|
month[4] = "мая";
|
||||||
|
month[5] = "июня";
|
||||||
|
month[6] = "июля";
|
||||||
|
month[7] = "августа";
|
||||||
|
month[8] = "сентября";
|
||||||
|
month[9] = "октября";
|
||||||
|
month[10] = "ноября";
|
||||||
|
month[11] = "декабря";
|
||||||
|
|
||||||
|
d.innerHTML = "Сейчас " + day + " " + month[jsmonth] + " " + year + " года, " + hour + ":" + ('0' + minutes).slice(-2) + ":" + ('0' + second).slice(-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTimeRemaining(endtime) {
|
||||||
|
var t = Date.parse(endtime) - Date.now();
|
||||||
|
var mseconds = t % 1000;
|
||||||
|
var seconds1_100 = Math.floor((t / 10) % 1000);
|
||||||
|
var seconds = Math.floor((t / 1000) % 60);
|
||||||
|
var minutes = Math.floor((t / 1000 / 60) % 60);
|
||||||
|
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
|
||||||
|
var days = Math.floor(t / (1000 * 60 * 60 * 24));
|
||||||
|
return {
|
||||||
|
'total': t,
|
||||||
|
'days': days,
|
||||||
|
'hours': hours,
|
||||||
|
'minutes': minutes,
|
||||||
|
'seconds': seconds,
|
||||||
|
'seconds1_100': seconds1_100,
|
||||||
|
'mseconds': mseconds
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeBackgroundColor() {
|
||||||
|
var t = Date.now() % 86400000 / 86400000;
|
||||||
|
colors = [[0, 160, 255], [0, 0, 60]];
|
||||||
|
if (t < (86400000/2)){
|
||||||
|
currect = [0, colors[0][0]*(1-t), (colors[0][2]-colors[1][2])*(1-t)+colors[1][2]];
|
||||||
|
}else{
|
||||||
|
currect = [0, colors[0][0]*(t), (colors[0][2]-colors[1][2])*(t)+colors[1][2]];
|
||||||
|
}
|
||||||
|
document.getElementsByTagName("body")[0].style.backgroundColor = "#"+("0"+Math.round(currect[0]).toString(16)).slice(-2)+("0"+Math.round(currect[1]).toString(16)).slice(-2)+("0"+Math.round(currect[2]).toString(16)).slice(-2);
|
||||||
|
document.getElementById("bghex").innerHTML = document.getElementsByTagName("body")[0].style.backgroundColor
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeClock(endtime) {
|
||||||
|
var num1 = document.getElementById('num1');
|
||||||
|
var num2 = document.getElementById('num2');
|
||||||
|
var textnum1 = document.getElementById('text-num1');
|
||||||
|
var textnum2 = document.getElementById('text-num2');
|
||||||
|
var dots = document.getElementById('separator');
|
||||||
|
var debug1 = document.getElementById('endtime');
|
||||||
|
var debug2 = document.getElementById('left');
|
||||||
|
var debug3 = document.getElementById('fulltimer');
|
||||||
|
var updateTime = 1000 / 60;
|
||||||
|
|
||||||
|
function updateClock() {
|
||||||
|
var t = getTimeRemaining(endtime);
|
||||||
|
if (t.days > 99){
|
||||||
|
num1.innerHTML = t.days;
|
||||||
|
num2.innerHTML = ('0' + t.hours).slice(-2);
|
||||||
|
textnum1.innerHTML = 'Дней';
|
||||||
|
textnum2.innerHTML = 'Часов';
|
||||||
|
document.title = t.days + " дн. до НГ";
|
||||||
|
}
|
||||||
|
else if (t.days > 0) {
|
||||||
|
num1.innerHTML = ('0' + t.days).slice(-2);
|
||||||
|
num2.innerHTML = ('0' + t.hours).slice(-2);
|
||||||
|
textnum1.innerHTML = 'Дней';
|
||||||
|
textnum2.innerHTML = 'Часов';
|
||||||
|
document.title = t.days + " дн. до НГ";
|
||||||
|
}
|
||||||
|
else if (t.hours > 0) {
|
||||||
|
num1.innerHTML = ('0' + t.hours).slice(-2);
|
||||||
|
num2.innerHTML = ('0' + t.minutes).slice(-2);
|
||||||
|
textnum1.innerHTML = 'Часов';
|
||||||
|
textnum2.innerHTML = 'Минут';
|
||||||
|
document.title = t.hours + " ч. до НГ";
|
||||||
|
}
|
||||||
|
else if (t.minutes > 0) {
|
||||||
|
num1.innerHTML = ('0' + t.minutes).slice(-2);
|
||||||
|
num2.innerHTML = ('0' + t.seconds).slice(-2);
|
||||||
|
textnum1.innerHTML = 'Минут';
|
||||||
|
textnum2.innerHTML = 'Секунд';
|
||||||
|
document.title = t.minutes + " мин. до НГ";
|
||||||
|
}
|
||||||
|
else if (t.total > 0) {
|
||||||
|
num1.innerHTML = ('0' + t.seconds).slice(-2);
|
||||||
|
num2.innerHTML = ('0' + t.seconds1_100).slice(-2);
|
||||||
|
textnum1.innerHTML = '';
|
||||||
|
textnum2.innerHTML = '';
|
||||||
|
document.title = t.seconds + " сек. до НГ";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
num1.innerHTML = "00";
|
||||||
|
num2.innerHTML = "00";
|
||||||
|
clearInterval(timeinterval);
|
||||||
|
document.title = "С новым годом!";
|
||||||
|
var congrats = document.getElementById("congrats");
|
||||||
|
congrats.innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
|
||||||
|
};
|
||||||
|
if (t.seconds % 2) {
|
||||||
|
dots.style.color = "#fff";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
dots.style.color = "#fff0";
|
||||||
|
}
|
||||||
|
changeBackgroundColor();
|
||||||
|
debug2.innerHTML = t.total.toLocaleString('ru');
|
||||||
|
debug3.innerHTML = t.days + ':' + ('0' + t.hours).slice(-2) + ':' + ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2) + '.' + ('00' + t.mseconds).slice(-3);
|
||||||
|
}
|
||||||
|
debug1.innerHTML = endtime;
|
||||||
|
updateClock();
|
||||||
|
var timeinterval = setInterval(updateClock, updateTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
var d_for_setting = new Date(), future_year;
|
||||||
|
if (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7){
|
||||||
|
future_year = d_for_setting.getFullYear()
|
||||||
|
}else{
|
||||||
|
future_year = d_for_setting.getFullYear() + 1
|
||||||
|
}
|
||||||
|
document.getElementById("future_year").innerHTML = future_year;
|
||||||
|
initializeClock("Jan 01 " + future_year + " 00:00:00");
|
||||||
|
DateTime();
|
||||||
|
setInterval(DateTime, 1000 / 60);
|
||||||
Loading…
Reference in New Issue