[JS] 指定日時までの残り時間をリアルタイムで表示する
概要
指定日時までの残り時間を表示する。
実装
残り
残り
コード
HTML
<p>残り<span class="countdown" data-date="2019-12-03 04:56"></span></p>
<p>残り<span class="countdown" data-date="2020-09-08 12:30"></span></p>
JavaScript
</body>直前に貼り付け。
<script>
window.addEventListener('load',()=>{
Countdown();
})
const Countdown = function(){
const cd_areas = document.getElementsByClassName('countdown');
[...cd_areas].forEach(cd_area=>{
const target_unix = new Date(cd_area.dataset.date)/1000;
setInterval(()=>{
const now_unix = Math.floor(new Date()/1000);
let sec = target_unix-now_unix;
let cd_text = '';
if(sec>=86400){
cd_text += Math.floor(sec/86400)+'日';
sec = sec%86400;
}
if(sec>=3600){
cd_text += td(Math.floor(sec/3600))+'時間';
sec = sec%3600;
}else{
cd_text += '00時間';
}
if(sec>=60){
cd_text += td(Math.floor(sec/60))+'分';
sec = sec%60;
}else{
cd_text += '00分';
}
cd_text += td(sec)+'秒';
cd_area.textContent = cd_text;
},1000);
});
function td(x){
if(x<10){
return '0'+x;
}else{
return x;
}
}
}
</script>