1. ホーム >
2. お仕事 >
3. 【JS】カウントダウンタイマー
4. JavaScript >
5. 【JS】カウントダウンタイマー

【JS】カウントダウンタイマー

お仕事であるイベントまでのカウントダウンをJSで組み込んだので覚書です。

元のスクリプトのままだと日時が英語表記なのですが、
jquery.yycountdown.min.jsの11行目を以下のように書き換えると日本語表記になります。

unit          : {d: '日', h: '時間', m: '分', s: '秒'},

jquery.yycountdown.min.jsは圧縮されていて一行ですがDreamWeaberで編集＞コード＞ソースフォーマットの適用で改行されたコードに戻ります。

html

<div id='olympic'>TOKYO<span>●</span>2020</div>
<div id='olympicDate'>TOKYO Olympics is on Friday, 24 July 2020 !!</div>
<div id='timerOlympic'></div>

CSS

.yycountdown-box{
  text-align:center;
  margin:10px 0;
  color:#000000;
}
 
#timerOlympic .yycountdown-box .yyc-day{
  font-size:3.0em;
  color:#009f3d;
}
#timerOlympic .yycountdown-box .yyc-hou{
  font-size:3.0em;
  color:#009f3d;
}
#timerOlympic .yycountdown-box .yyc-min{
  font-size:3.0em;
  color:#009f3d;
}
#timerOlympic .yycountdown-box .yyc-sec{
  font-size:3.0em;
  color:#009f3d;
}
 
#timerOlympic .yycountdown-box .yyc-day-text,
#timerOlympic .yycountdown-box .yyc-hou-text,
#timerOlympic .yycountdown-box .yyc-min-text,
#timerOlympic .yycountdown-box .yyc-sec-text{
  font-size:1.0em;
}

JavaScript

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.yycountdown.min.js"></script>
<script type="text/javascript">
$('#timerOlympic').yycountdown({
endDateTime : '2020/07/24 00:00:00'
});
</script>

【参考サイト】
jQueryカウントダウンタイマー【デザイン自由自在版】
https://yyengine.jp/jquery-yycountdown/

  広告

 - JavaScript, お仕事