dan63
/
Counter-to-new-year
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Таймер по центру 

Лишние элементы убраны
Настроен новогодний прикол
This commit is contained in:
dan63047 2021-09-21 19:25:31 +03:00
parent af5c8a18c0
commit 3d76c73afe
5 changed files with 15 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
README.md Normal file → Executable file
View File

27
index.html Normal file → Executable file
View File

@ -13,26 +13,8 @@
</head> </head>
<body> <body>
<h1 class="countdown-title">До нового <span id="future_year"></span> года осталось:</h1>
<div class=".container-fluid"> <div class=".container-fluid">
<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-link').css('color', 'rgba(0, 0, 0, 0)')">Скрыть 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" tabindex="-1" role="dialog" id="about">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
@ -78,8 +60,9 @@
</div> </div>
</div> </div>
</div> </div>
<h1 class="countdown-title">До нового <span id="future_year"></span> года осталось:</h1>
<div id="countdown" class="countdown"> <div id="countdown" class="countdown">
<div class="countdown-inner"> <div class="countdown-inner">
<span class="didts" id="num1"></span> <span class="didts" id="num1"></span>
</div> </div>
@ -92,10 +75,8 @@
<span class="didts" id="num3"></span> <span class="didts" id="num3"></span>
</div> </div>
</div> </div>
<div id="congrats">
</div>
</div> </div>
<a class="nav-link" data-toggle="modal" href='#about' style="color: #ffffff; text-decoration: underline; width: 100%; position: absolute; bottom: 0;">О странице</a>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>

6
jquery.fireworks.js Normal file → Executable file
View File

@ -257,14 +257,14 @@ TODO:
var angle = Math.random() * Math.PI * 2; var angle = Math.random() * Math.PI * 2;
// emulate 3D effect by using cosine and put more particles in the middle // emulate 3D effect by using cosine and put more particles in the middle
var speed = Math.cos(Math.random() * Math.PI / 2) * 15; var speed = Math.cos(Math.random() * Math.PI / 2) * 20;
particle.vel.x = Math.cos(angle) * speed; particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed; particle.vel.y = Math.sin(angle) * speed;
particle.size = 10; particle.size = 20;
particle.gravity = 0.2; particle.gravity = 0.1;
particle.resistance = 0.92; particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93; particle.shrink = Math.random() * 0.05 + 0.93;

8
main.css Normal file → Executable file
View File

@ -2,13 +2,18 @@ body {
text-align: center; text-align: center;
font-family: "Open Sans"; font-family: "Open Sans";
font-weight: 100; font-weight: 100;
display: grid;
height: 100vh;
align-content: center;
} }
.countdown-title { .countdown-title {
color: #fff; color: #fff;
font-weight: 100; font-weight: 100;
font-size: 40px; font-size: 40px;
margin: 0; position: absolute;
width: 100%;
margin: 3vh 0 0 0;
} }
.countdown { .countdown {
@ -18,7 +23,6 @@ body {
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;
height: 60vh;
width: max-content; width: max-content;
margin: auto; margin: auto;
} }

34
script.js Normal file → Executable file
View File

@ -1,30 +1,3 @@
function DateTime() {
var dateNow = 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) { function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.now(); var t = Date.parse(endtime) - Date.now();
var mseconds = t % 1000; var mseconds = t % 1000;
@ -112,8 +85,7 @@ function initializeClock(endtime) {
num3.innerHTML = "00"; num3.innerHTML = "00";
clearInterval(timeinterval); clearInterval(timeinterval);
document.title = "С новым годом!"; document.title = "С новым годом!";
var congrats = document.getElementById("congrats"); document.getElementsByClassName("countdown-title")[0].innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
congrats.innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
setTimeout(function() { setTimeout(function() {
$('body').fireworks(); $('body').fireworks();
}); });
@ -132,7 +104,5 @@ let d_for_setting = new Date();
let future_year = (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7) ? d_for_setting.getFullYear() : d_for_setting.getFullYear() + 1 let future_year = (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7) ? d_for_setting.getFullYear() : d_for_setting.getFullYear() + 1
document.getElementById("future_year").innerHTML = future_year; document.getElementById("future_year").innerHTML = future_year;
initializeClock("Jan 01 " + future_year + " 00:00:00"); initializeClock("Jan 01 " + future_year + " 00:00:00");
//initializeClock("Aug 15 2021 22:17:00"); //initializeClock("Sep 22 2021 19:21:00");
DateTime();
setInterval(DateTime, 1000/60);
setInterval(changeBackgroundColor, 1000/60); setInterval(changeBackgroundColor, 1000/60);