文字のデザイン変更が可能なカウントダウンを実装したい

前提・実現したいこと

文字のデザイン変更が可能なカウントダウンを実装したいです。
以下のサイト
https://yyengine.jp/jquery-yycountdown/
の「サンプル ─ 使用例：東京オリンピック開催までのカウントダウンタイマー」をひとまず表示してみたいと思い、そのまま引用元のgitから引っ張ってきたのですが、要素の高さが0になっていて肝心のカウントダウンが表示できません。どこがおかしいのかご指摘をお願いします。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6<link rel="stylesheet" href="css/countdown.css">
7</head>
8
9<body>
10	<div id="olympic">TOKYO<span>●</span>2020</div>
11	<div id="olympicDate">TOKYO Olympics is on Friday, 24 July 2020 !!</div>
12    <div id="timerOlympic"></div>
13    
14    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
15    <script type="text/javascript" src="javascript/countdown.js"></script>
16</body>
17</html>
18

css
1@charset "utf-8";
2/* CSS Document */
3
4.yycountdown-box{
5  text-align:center;
6  margin:10px 0;
7  color:#000000;
8}
9 
10#timerOlympic .yycountdown-box .yyc-day{
11  font-size:10px;
12  color:#0085C7;
13}
14#timerOlympic .yycountdown-box .yyc-hou{
15  font-size:10px;
16  color:#F4C300;
17}
18#timerOlympic .yycountdown-box .yyc-min{
19  font-size:10px;
20  color:#009F3D;
21}
22#timerOlympic .yycountdown-box .yyc-sec{
23  font-size:10px;
24  color:#DF0024;
25}
26 
27#timerOlympic .yycountdown-box .yyc-day-text,
28#timerOlympic .yycountdown-box .yyc-hou-text,
29#timerOlympic .yycountdown-box .yyc-min-text,
30#timerOlympic .yycountdown-box .yyc-sec-text{
31  font-size:10px;
32}

javascript
1// JavaScript Document
2
3$('#timerOlympic').yycountdown({
4  endDateTime   : '2020/07/24 00:00:00'
5});
6
7/*
8 * jquery.yycountdown plugin
9 *
10 * Copyright (c) 2014 YYengine Yuji Yamabata
11 * Dual licensed under the MIT and GPL licenses.
12 * http://docs.jquery.com/License
13 */
14;(function($) {
15	$.fn.yycountdown = function(options){
16		
17		//default setting
18		var defaults = {
19			startDateTime : new Date(),
20			endDateTime   : '2020/07/24 00:00:00',
21			diffDateTime  : 0,
22			unit          : {d: 'day', h: 'hour', m: 'min', s: 'sec'},
23			complete      : null,
24			node          : {d: null, h: null, m: null, s: null},
25			self          : null,
26			timerId       : null
27		};
28		var setting = $.extend(defaults, options);
29		
30		//DOM node set
31		setting.self = $(this);
32
33		//coutdown init
34		var _initTimer = function(){
35			//change string to Date object
36			if(typeof setting.complete !== 'Date'){
37				setting.startDateTimeObj = new Date(setting.startDateTime);
38			}
39			setting.endDateTimeObj   = new Date(setting.endDateTime);
40			setting.diffDateTime     = Math.floor((setting.endDateTimeObj - setting.startDateTimeObj) / 1000);
41			
42			//view node setting
43			var box        = $('<div />').addClass('yycountdown-box');
44			var boxDay     = $('<span />').addClass('yyc-day');
45			var boxHou     = $('<span />').addClass('yyc-hou');
46			var boxMin     = $('<span />').addClass('yyc-min');
47			var boxSec     = $('<span />').addClass('yyc-sec');
48			var boxDayText = $('<span />').addClass('yyc-day-text');
49			var boxHouText = $('<span />').addClass('yyc-hou-text');
50			var boxMinText = $('<span />').addClass('yyc-min-text');
51			var boxSecText = $('<span />').addClass('yyc-sec-text');
52			
53			boxDayText.html(setting.unit.d);
54			boxHouText.html(setting.unit.h);
55			boxMinText.html(setting.unit.m);
56			boxSecText.html(setting.unit.s);
57
58			box.append(boxDay).append(boxDayText)
59				.append(boxHou).append(boxHouText)
60				.append(boxMin).append(boxMinText)
61				.append(boxSec).append(boxSecText);
62			setting.self.append(box);
63			
64			setting.node.d = setting.self.find('.yyc-day');
65			setting.node.h = setting.self.find('.yyc-hou');
66			setting.node.m = setting.self.find('.yyc-min');
67			setting.node.s = setting.self.find('.yyc-sec');
68		}
69
70		//timer coutdown
71		var _countTimer = function(){
72			var objDiff = _formatTimer(--setting.diffDateTime);
73			_viewTimer(objDiff);
74			if(setting.diffDateTime <= 0)  _completeTimer();
75		}
76		
77		//time view
78		var _viewTimer = function(objDiff){
79			setting.node.d.html(objDiff.d);
80			setting.node.h.html(('0' + objDiff.h).slice(-2));
81			setting.node.m.html(('0' + objDiff.m).slice(-2));
82			setting.node.s.html(('0' + objDiff.s).slice(-2));
83		}
84		
85		//change ms to _day_hour_min_sec
86		var _formatTimer = function(diff){
87			var oneM = 60;
88			var oneH = 60 * 60;
89			var oneD = 60 * 60 * 24;
90			var diffDay    = Math.floor(diff / oneD);
91			var diffHour   = Math.floor((diff - diffDay * oneD) / oneH);
92			var diffMinute = Math.floor((diff - diffDay * oneD - diffHour * oneH) / oneM);
93			var diffSecond = Math.floor((diff - diffDay * oneD - diffHour * oneH - diffMinute * oneM));
94			
95			return {
96				d: diffDay,
97				h: diffHour,
98				m: diffMinute,
99				s: diffSecond
100			};
101		}
102
103		//timer complete
104		var _completeTimer = function(){
105			clearInterval(setting.timerId);
106			if(typeof setting.complete === 'function')  setting.complete(setting.self);
107		}
108		
109		//coutdown timer start
110		_initTimer();
111		setting.timerId = setInterval(_countTimer, 1000);
112	};
113	
114})(jQuery);

行動規範の内容に同意します

回答1件

yycountdown() を定義する前に実行することはできません。ブラウザのコンソールにエラーが表示されているはずです。期待通りの動作をしないときには必ずエラーの有無を確認して、エラーが出ている場合は適切な対処をしてください。

js
1$('#timerOlympic').yycountdown({
2  endDateTime   : '2020/07/24 00:00:00'
3});

ここを countdown.js ファイルの末尾に移動するだけで動作すると思います。

CodePen

投稿2020/06/14 00:54

thyda.eiqau

総合スコア2982

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！