JavaScriptでカウントダウンタイマーを設置したい

前提・実現したいこと

Java ScriptでHPにカウントダウンタイマーを設置したいのですが、うまく作動しません。

こちらのページです。
http://pic-twiteer.com/test/top.html

発生している問題・エラーメッセージ

カウントダウンが動きません。

該当のソースコード


function CountdownTimer(elm,tl,mes){
this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
initialize:function(elm,mes) {
  this.elem = document.getElementById(elm);
  this.mes = mes;
},countDown:function(){
  var timer='';
  var tl = new Date('2019/6/1 19:59:59');
  var today=new Date();
  var day=Math.floor((tl-today)/(24*60*60*1000));
  var hour=Math.floor(((tl-today)%(24*60*60*1000))/(60*60*1000));
  var mi=Math.floor(((tl-today)%(24*60*60*1000))/(60*1000))%60;
  var sec=Math.floor(((tl-today)%(24*60*60*1000))/1000)%60%60;
  var msec=Math.floor(((tl-today)%(24*60*60*1000))/10);
  var me=this;

  if( ( tl - today ) > 0 ){
	timer = '<span class="etc"><span style="color:#FFF;">募集開始まであと </span>';
   if (day) timer += '<span class="day">'+day+'日と</span>';
   if (hour) timer += '<span class="hour">'+hour+'時間</span>';
   timer += '<span class="mi">'+this.addZero(mi)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span><span class="msec">'+this.addZero(msec)+' です</span>';
   this.elem.innerHTML = timer;
   tid = setTimeout( function(){me.countDown();},10 );
  }else{
   this.elem.innerHTML = this.mes;
   return;
  }
},addZero:function(num){ return ('0'+num).slice(-2); }
}
function CDT(){
var timer = new CountdownTimer('CDT','<span class="etc"><span style="color:#FFF;">募集開始しました！ブラウザを更新してください。</span>');
timer.countDown();
}

window.onload=function(){
CDT();
}

htmlソースです

該当のソースコード

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>After Five</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
<meta name="keywords" content="free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="FreeHTML5.co" />



<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<!-- Animate.css -->
<link rel="stylesheet" href="css3/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css3/icomoon.css">
<!-- Bootstrap  -->
<link rel="stylesheet" href="css3/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css3/owl.carousel.min.css">
<link rel="stylesheet" href="css3/owl.theme.default.min.css">
<!-- Theme style  -->
<link rel="stylesheet" href="css3/style.css">

<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<div id="fh5co-page"> 
  <div id="fh5co-main">
    <div class="fh5co-cards">
      <div class="fh5co-narrow-content">
        <h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">OPENまで、あと</h2>
      </div>
    </div>
	<div class="fh5co-counters" style="background-image: url(images/hero.jpg);" data-stellar-background-ratio="0.5" id="counter-animate">
      <div class="fh5co-narrow-content animate-box">
        <div class="row" >
<div id="headerArea">
  <div class="timer_center">
    <div class="cnt">
      <div id="CDT" style="margin:0; text-align:center;"></div>
    </div>
  </div>
</div>        </div>
      </div>
    </div>
  </div>
</div>

<!-- jQuery --> 
<script src="js/jquery.min.js"></script> 
<!-- jQuery Easing --> 
<script src="js/jquery.easing.1.3.js"></script> 
<!-- Bootstrap --> 
<script src="js/bootstrap.min.js"></script> 
<!-- Carousel --> 
<script src="js/owl.carousel.min.js"></script> 
<!-- Stellar --> 
<script src="js/jquery.stellar.min.js"></script> 
<!-- Waypoints --> 
<script src="js/jquery.waypoints.min.js"></script> 
<!-- Counters --> 
<script src="js/jquery.countTo.js"></script> 

<!-- MAIN JS --> 
<script src="js/main.js"></script>
<script src="timer.js"></script>
</body>
</html>

起きた現象
・カウントダウンが表示されない。

ブラウザデベロッパツールのコンソールにエラーは出ていません。

よろしくおねがいします。

修正履歴

・JavaScript
日付の変更
var tl = new Date('2019/2/27 19:59:59');
↓
var tl = new Date('2019/6/1 19:59:59');

・htmlコードの変更

m.ts10806

2019/05/21 02:13

htmlもご提示ください。また、 >これを入れるとどこにどのように入れましたか？ブラウザデベロッパツールのコンソールにエラー等でていませんでしたか？質問に起きた現象を具体的に追記してください

Lhankor_Mhy

2019/05/21 02:16

<span class="fh5co-counter js-counter" data-from="0" data-to="'+day+'" data-speed="5000" data-refresh-interval="50"></span> <span class="fh5co-counter-label">日</span> ↑これ、spanの子要素に文字が入ってなくて空要素になってないですか？

Lhankor_Mhy

2019/05/21 02:20

> spanの属性にすると出力されなくなってしまいます。あ、意図した書き方なのですね…… data-to属性を表示させる部分のスクリプトをご提示いただけますか？　なにかモジュールを使っているのでしょうか？