カウントダウン機能について
今回のカウントダウン機能は、特定の日時に向けての残り時間を表示する内容です。カウントダウンは何かのイベントや節目の日を対象に、ワクワク感や待ち遠しさを演出する効果があります。また、予定を忘れてほしくない時にも役立つでしょう。
百聞は一見に如かずですので、まずは、サンプルをご覧ください。
2025年まで
あと
12
日
12
時間
12
分
13
13
秒
こんな感じで残り日数や時間を表示できます。
カウントダウン機能の活躍シーン
- イベントなどの気分を盛り上げたい
- クーポンや特別オファーなどの有効期限を知らせたい
基本的には、何かのフェスの開始や新アイテムの販売など、ワクワク感を演出したい時に使うケースが多いのではないでしょうか。大阪万博は今のところ日数だけですが表示しています。
また、タイムセールの終了や、特別オファーの期限切れを知らせるのにも良く使われます。
カウントダウン機能の作り方
HTMLとCSSは日時の表示用で、計算はJavaScriptで行っています。
ソースコード
HTML
<div id="cntDown">
<div id="cntDownHead">
TextHeader
</div>
<div id="cntDownBottom">
<div class="CntDs">あと</div>
<div id="day" class="CntDbig">12</div>
<div class="CntDs">日</div>
<div id="hour" class="CntDbig">12</div>
<div class="CntDs">時間</div>
<div id="min" class="CntDbig">12</div>
<div class="CntDs">分</div>
<div id="sec" class="CntDbig2">13</div>
<div id="secm" class="CntDbig3">13</div>
<div class="CntDs"> 秒</div>
</div>
</div>
CSS
#cntDown{
background-image: url('img/chinese.jpg');
width:800px;
height:332px;
color:rgb(214, 214, 214);
}
#cntDownHead{
font-size:32px;
width:fit-content;
margin:0px auto 40px auto;
padding:80px 0 0 0;
}
#cntDownBottom{
font-size:24px;
width:fit-content;
margin:20px auto;
display:flex;
}
.CntDbig{
font-size:48px;
width:fit-content;
}
.CntDbig2{
font-size:48px;
width:70px;
}
.CntDbig3{
font-size:48px;
width:70px;
}
.CntDs{
margin:8px 12px 0 0;
}
background-image: url('img/chinese.jpg');
width:800px;
height:332px;
color:rgb(214, 214, 214);
}
#cntDownHead{
font-size:32px;
width:fit-content;
margin:0px auto 40px auto;
padding:80px 0 0 0;
}
#cntDownBottom{
font-size:24px;
width:fit-content;
margin:20px auto;
display:flex;
}
.CntDbig{
font-size:48px;
width:fit-content;
}
.CntDbig2{
font-size:48px;
width:70px;
}
.CntDbig3{
font-size:48px;
width:70px;
}
.CntDs{
margin:8px 12px 0 0;
}
JavaScript
//ze-no:WebDevelopment
var TrgYear
var TrgMonth
var TrgDay
var Trghour
var Trgmin
var TrgSec
var TrgSecm
const day = document.getElementById("day");
const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");
const secm = document.getElementById("secm");
var nowDates = new Date();
var trgTime = new Date('2025-01-01T00:00+09:00').getTime();
window.addEventListener('DOMContentLoaded', function() {
console.log("Dates",Dates);
})
async function CountDown(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
nowDates = new Date();
var Result=trgTime-nowDates;
TrgDay=Math.floor(Result/1000/60/60/24);
Trghour=Math.floor(Result/1000/60/60)%24;
Trgmin=Math.floor(Result/1000/60)%60;
TrgSec=Math.floor(Result/1000)%60;
TrgSecm=Math.floor(Result/10)%100;
//TrgSec=String(TrgSec< 10 ? "0"+TrgSec:TrgSec);
console.log("Result", Result);
console.log("Dates", TrgDay);
console.log("Trghour", Trghour);
console.log("Trgmin", Trgmin);
console.log("TrgSec", TrgSec);
console.log("TrgSecm", TrgSecm);
day.innerHTML=TrgDay;
hour.innerHTML=Trghour< 10 ? '0' +Trghour:Trghour ;
min.innerHTML=Trgmin< 10 ? '0' + Trgmin : Trgmin;
sec.innerHTML=TrgSec< 10 ? '0' +TrgSec+".":TrgSec+".";
secm.innerHTML=TrgSecm< 10 ? '0'+TrgSecm:TrgSecm;
}
interval=setInterval (function(){
if(day!=null){
CountDown()
}
}, 30);
var TrgYear
var TrgMonth
var TrgDay
var Trghour
var Trgmin
var TrgSec
var TrgSecm
const day = document.getElementById("day");
const hour = document.getElementById("hour");
const min = document.getElementById("min");
const sec = document.getElementById("sec");
const secm = document.getElementById("secm");
var nowDates = new Date();
var trgTime = new Date('2025-01-01T00:00+09:00').getTime();
window.addEventListener('DOMContentLoaded', function() {
console.log("Dates",Dates);
})
async function CountDown(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
nowDates = new Date();
var Result=trgTime-nowDates;
TrgDay=Math.floor(Result/1000/60/60/24);
Trghour=Math.floor(Result/1000/60/60)%24;
Trgmin=Math.floor(Result/1000/60)%60;
TrgSec=Math.floor(Result/1000)%60;
TrgSecm=Math.floor(Result/10)%100;
//TrgSec=String(TrgSec< 10 ? "0"+TrgSec:TrgSec);
console.log("Result", Result);
console.log("Dates", TrgDay);
console.log("Trghour", Trghour);
console.log("Trgmin", Trgmin);
console.log("TrgSec", TrgSec);
console.log("TrgSecm", TrgSecm);
day.innerHTML=TrgDay;
hour.innerHTML=Trghour< 10 ? '0' +Trghour:Trghour ;
min.innerHTML=Trgmin< 10 ? '0' + Trgmin : Trgmin;
sec.innerHTML=TrgSec< 10 ? '0' +TrgSec+".":TrgSec+".";
secm.innerHTML=TrgSecm< 10 ? '0'+TrgSecm:TrgSecm;
}
interval=setInterval (function(){
if(day!=null){
CountDown()
}
}, 30);
まとめ
カウントダウン機能の紹介でした。お役に立てれば幸いです。
目次-Index-
