デジタルチックな良い感じのタイマーを実装したので速攻で共有します。
成果物はこんな感じです。
コードはこんな感じ。
なお、スタイリングには Bootstrap4&CSSを使用しています。
bootstrap4 download
index.html
/* 画面の右下に配置 */
<divclass=""style="position:fixed;bottom:-30px;right: -100px;z-index:100;width: 17em"><main><!-- 時計 --><divclass="clock text-center"><!-- 時間 --><divclass="numbers"><pclass="hours mb-0"></p><pclass="placeholder mb-0">88</p></div><divclass="colon"><pclass="mb-0">:</p></div><!-- 分 --><divclass="numbers"><pclass="minutes mb-0"></p><pclass="placeholder mb-0">88</p></div><divclass="colon"><pclass="mb-0">:</p></div><!-- 秒 --><divclass="numbers"><pclass="seconds mb-0"></p><pclass="placeholder mb-0">88</p></div></div> <!-- タイマーを止めるボタン(機能は実装しません) --><divclass="text-center"><buttontype="button"class="btn btn-light font-weight-bold my-0 px-5">タイマーを止める</button></div></main></div>お次にcss
style.css
*{margin:0;padding:0;}main{color:#ffffff;background-color:#000000;font-family:'digital-7',sans-serif;}main{transform:translate(-50%,-50%);padding:15px;border:solid5px#ffffff;}div.days{margin:0auto;color:#131212;}div.days.day{display:inline-block;}div.days.dayp{font-size:12px;font-weight:bold;font-family:sans-serif;text-transform:uppercase;}div.clockdiv{display:inline-block;position:relative;}div.clockdivp{font-size:30px;position:relative;z-index:100;}div.clock.placeholder{color:#131212;position:absolute;top:0;z-index:50;}.light-on{color:#ffffff;}からのjavascript
index.js
// 9:00:00 -> 09:00:00 って一桁の数値の場合に0を付与してあげる関数functionaddZero(val){return(val<=9)?("0"+val):val;}constsecond=1000,minute=second*60,hour=minute*60,day=hour*24;letcountDown=newDate('Nov 10, 2020 00:00:00').getTime(),hoge=setInterval(function(){letnow=newDate().getTime(),distance=countDown-now;document.getElementsByClassName('hours')[0].innerText=addZero(Math.floor((distance%(day))/(hour))), document.getElementsByClassName('minutes')[0].innerText=addZero(Math.floor((distance%(hour))/(minute))), document.getElementsByClassName('seconds')[0].innerText=addZero(Math.floor((distance%(minute))/(second)));// 時間が0以下になった時の処理if(distance<0){clearInterval(hoge);}},second)デジタルチックなフォント表現をするために Digital 7フォントを使用しています。
Digital 7フォントから任意のファイルをダウンロードしてhtmlファイル内で読み込んであげてください。