Найти в Дзене
Дневник программиста
16 подписчиков

Таймер до нового года на HTML, CSS, JS.

17
1 мин
ТЗ - Создайте HTML-страницу в выведенной на нее информацией сколько осталось до нового года с момента запуска кода. <body> <div class="timer"> <h1>До Нового года осталось:</h1> <div class="d"><p id="day"></p> <p class="da">Дней</p> </div> <div class="w"><p id="Watch"></p> <p class="wa">Часов</p> </div> <div class="m"><p id="Min"></p> <p class="mi">Минут</p> </div> <div class="s"><p id="Sec"></p> <p class="se">Секунд</p> </div> </div> </body><body> <div class="timer"> <h1>До Нового года осталось:</h1> <div class="d"><p id="day"></p> <p class="da">Дней</p> </div> <div class="w"><p id="Watch"></p> <p class="wa">Часов</p> </div> <div class="m"><p id="Min"></p> <p class="mi">Минут</p> </div> <div class="s"><p id="Sec"></p> <p class="se">Секунд</p> </div> </div> </body> .d, .w, .m, .s{ display:inline-block; margin-left: 40px; background:#6C8CD5; width:5%; text-align: center; border: 3px solid #FD0006; font-family:Bradley Hand, cursive; } .da, .wa, .mi, .se{ color:#fff; } .timer{ text-align:
Оглавление

ТЗ - Создайте HTML-страницу в выведенной на нее информацией сколько осталось до нового года с момента запуска кода.

HTML

<body>
<div class="timer">
<h1>До Нового года осталось:</h1>
<div class="d"><p id="day"></p>
<p class="da">Дней</p>
</div>
<div class="w"><p id="Watch"></p>
<p class="wa">Часов</p>
</div>
<div class="m"><p id="Min"></p>
<p class="mi">Минут</p>
</div>
<div class="s"><p id="Sec"></p>
<p class="se">Секунд</p>
</div>
</div>
</body><body>
<div class="timer">
<h1>До Нового года осталось:</h1>
<div class="d"><p id="day"></p>
<p class="da">Дней</p>
</div>
<div class="w"><p id="Watch"></p>
<p class="wa">Часов</p>
</div>
<div class="m"><p id="Min"></p>
<p class="mi">Минут</p>
</div>
<div class="s"><p id="Sec"></p>
<p class="se">Секунд</p>
</div>
</div>
</body>

CSS

-2
.d, .w, .m, .s{
display:inline-block;
margin-left: 40px;
background:#6C8CD5;
width:5%;
text-align: center;
border: 3px solid #FD0006;
font-family:Bradley Hand, cursive;
}
.da, .wa, .mi, .se{
color:#fff;
}
.timer{
text-align: center;
}

JS

-3
function calculateDays() {
var today = new Date();
var newYear = new Date(today.getFullYear() + 1, 0, 1);
var daysLeft = Math.floor((newYear - today) / (1000 * 60 * 60 * 24) - 1);
return daysLeft;
}
function calculateWatch() {
var today = new Date();
return 23 - today.getHours();
}
function calculateMin() {
var today = new Date();
return 59 - today.getMinutes();
}
function calculateSec() {
var today = new Date();
return 59 - today.getSeconds();
}
var calculateDays = calculateDays();
var calculateWatch = calculateWatch();
var calculateMin = calculateMin();
var calculateSec = calculateSec();
day.innerHTML = calculateDays;
Watch.innerHTML = calculateWatch;
Min.innerHTML = calculateMin;
Sec.innerHTML = calculateSec;

Итог

-4

Ознакомиться с работай данного кода можно ТУТ.