<div class="wrapper">
<div class="countdownBx">
<p>Countdown to New Year <br><span>20<i>21</i></span></p>
<div class="countdown">
<div id="day">NA</div>
<div id="hour">NA</div>
<div id="minute">NA</div>
<div id="second">NA</div>
</div>
</div>
</div> 【JavaScript】現在日時と目標日時の差を取得し、カウントダウンを作成する方法
このようなカウントダウンをつくってみました。
Countdown to New Year
2021
NA
NA
NA
NA
HTMLのコードを見る
HTML
CSSのコードを見る
CSS
.wrapper{
position: relative;
width: 100%;
background: #992bff;
display: flex;
border-radius: 10px;
}
.wrapper .countdownBx{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.wrapper .countdownBx p{
text-align: center;
font-size: 1.5em;
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 500;
line-height: 4em;
}
.wrapper .countdownBx p span{
font-size: 5em;
font-weight: 700;
}
.wrapper .countdownBx p span i{
font-style: initial;
color: #ff0;
}
.wrapper .countdownBx .countdown{
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 0 10px 10px;
}
.wrapper .countdownBx .countdown div{
position: relative;
width: 100px;
text-align: center;
color: #fff;
font-size: 2.5em;
font-weight: 500;
margin: 0 15px;
}
.wrapper .countdownBx .countdown div:before{
content: 'text';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 35px;
color: #fff;
font-size: 0.35em;
font-weight: 500;
line-height: 35px;
letter-spacing: 1px;
text-transform: uppercase;
}
.wrapper .countdownBx .countdown div#day:before{
content: 'Days';
}
.wrapper .countdownBx .countdown div#hour:before{
content: 'hours';
}
.wrapper .countdownBx .countdown div#minute:before{
content: 'minutes';
}
.wrapper .countdownBx .countdown div#second:before{
content: 'seconds';
}
.wrapper .countdownBx .countdown div#second,
.wrapper .countdownBx .countdown div#second:before{
color: #ff0;
}
JavaScriptのコードを見る
javaScript
const countDate = new Date('jan 1, 2022 00:00:00').getTime();
function newYear(){
const now = new Date().getTime();
const gap = countDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const d = Math.floor(gap / (day));
const h = Math.floor((gap % (day)) / (hour));
const m = Math.floor((gap % (hour)) / (minute));
const s = Math.floor((gap % (minute)) / (second));
document.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("minute").innerText = m;
document.getElementById("second").innerText = s;
}
setInterval(function(){
newYear();
},1000)Point 1
現在時刻と目標時刻の差を取得する
const countDate = new Date('jan 1, 2021 00:00:00').getTime();
const now = new Date().getTime();
const gap = countDate - now;
consol.log(gap)差がマイクロ秒で取得できました。
Point 2
秒、分、時、日をそれぞれ定義し、差を計算する
const second = 1000; // 1秒 = 1000マイクロ秒
const minute = second * 60; // 1分 = 1000 × 60 マイクロ秒
const hour = minute * 60; // 1時間 = 1000 × 60 × 60 マイクロ秒
const day = hour * 24; // 1日 = 1000 × 60 × 60 × 24 マイクロ秒
const d = Math.floor(gap / (day));
const h = Math.floor((gap % (day)) / (hour));
const m = Math.floor((gap % (hour)) / (minute));
const s = Math.floor((gap % (minute)) / (second));Math.floor()は小数点以下を切り捨てます
Point 3
要素を取得し、そこに計算したものを埋め込む
d ocument.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("minute").innerText = m;
document.getElementById("second").innerText = s;
