Таймер по центру
Лишние элементы убраны Настроен новогодний прикол
This commit is contained in:
parent
af5c8a18c0
commit
3d76c73afe
|
|
@ -13,26 +13,8 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="countdown-title">До нового <span id="future_year"></span> года осталось:</h1>
|
||||
<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-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
|
|
@ -78,8 +60,9 @@
|
|||
</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>
|
||||
</div>
|
||||
|
|
@ -92,10 +75,8 @@
|
|||
<span class="didts" id="num3"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="congrats">
|
||||
|
||||
</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"
|
||||
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||
crossorigin="anonymous"></script>
|
||||
|
|
|
|||
|
|
@ -257,14 +257,14 @@ TODO:
|
|||
var angle = Math.random() * Math.PI * 2;
|
||||
|
||||
// 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.y = Math.sin(angle) * speed;
|
||||
|
||||
particle.size = 10;
|
||||
particle.size = 20;
|
||||
|
||||
particle.gravity = 0.2;
|
||||
particle.gravity = 0.1;
|
||||
particle.resistance = 0.92;
|
||||
particle.shrink = Math.random() * 0.05 + 0.93;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,18 @@ body {
|
|||
text-align: center;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 100;
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.countdown-title {
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
font-size: 40px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin: 3vh 0 0 0;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
|
|
@ -18,7 +23,6 @@ body {
|
|||
font-weight: 400;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
height: 60vh;
|
||||
width: max-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
var t = Date.parse(endtime) - Date.now();
|
||||
var mseconds = t % 1000;
|
||||
|
|
@ -112,8 +85,7 @@ function initializeClock(endtime) {
|
|||
num3.innerHTML = "00";
|
||||
clearInterval(timeinterval);
|
||||
document.title = "С новым годом!";
|
||||
var congrats = document.getElementById("congrats");
|
||||
congrats.innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
|
||||
document.getElementsByClassName("countdown-title")[0].innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
|
||||
setTimeout(function() {
|
||||
$('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
|
||||
document.getElementById("future_year").innerHTML = future_year;
|
||||
initializeClock("Jan 01 " + future_year + " 00:00:00");
|
||||
//initializeClock("Aug 15 2021 22:17:00");
|
||||
DateTime();
|
||||
setInterval(DateTime, 1000/60);
|
||||
//initializeClock("Sep 22 2021 19:21:00");
|
||||
setInterval(changeBackgroundColor, 1000/60);
|
||||
Loading…
Reference in New Issue