javascriptでカウントダウンタイマーを作りたい

セールスレターの3日間カウントダウンタイマー（開くと残り2日23時間59分59秒とカウントダウンがはじまる）を作りたいです。
javascriptを入れたのですがうまく表示されません。（日付や時間が全く表示されません）。
最初から入っている値var tl = new Date('2040/06/25 00:00:00');
だとうまく動きます。

html
1<script>
2function CountdownTimer(elm,tl,mes){
3this.initialize.apply(this,arguments);
4}
5CountdownTimer.prototype={
6initialize:function(elm,tl,mes) {
7this.elem = document.getElementById(elm);
8this.tl = tl;
9this.mes = mes;
10},countDown:function(){
11var timer='';
12var today=new Date();
13var day=Math.floor((this.tl-today)/(24*60*60*1000));
14var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
15var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
16var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
17var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
18var me=this;
19if( ( this.tl - today ) > 0 ){
20if (day) timer += '<span class="day">'+day+'日と</span>';
21if (hour) timer += '<span class="hour">'+hour+'時間</span>';
22timer += '<span class="min">'+this.addZero(min)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span><span class="milli">'+this.addZero(milli)+'</span>';
23this.elem.innerHTML = timer;
24tid = setTimeout( function(){me.countDown();},10 );
25}else{
26this.elem.innerHTML = this.mes;
27return;
28}
29},addZero:function(num){ return ('0'+num).slice(-2); }
30}
31function CDT(){
32var text = '販売終了まで :';
33<!--
34var tl = new Date('2040/06/25 00:00:00');-->
35var tl = new Date();
36tl.setDate(tl.getDate() + 3);
37var timer = new CountdownTimer('CDT',tl,'終了しました。');
38timer.countDown();
39target = document.getElementById("text");
40target.innerHTML = text;
41}
42window.onload=function(){
43CDT();
44}
45</script>

var tl = new Date();
tl.setDate(tl.getDate() + 3);
というのが、調べて3日後と設定したところです。

何がまずいでしょうか？

m.ts10806

2021/03/06 04:02

うまくいかないとは

dobashi

2021/03/06 04:26

日付や時間が全く表示されないです。

m.ts10806

2021/03/06 05:05

エラー確認、デバッグしてください。それで自己解決可能な内容です。

dobashi

2021/03/06 06:10

かしこまりました。

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

回答2件

ベストアンサー

function CDT(){
var text = '販売終了まで :';
<!--
var tl = new Date('2040/06/25 00:00:00');-->
var tl = new Date();
(略）

ここのコメントがHTMLでのコメント記法になっていてかつ途中で改行が入っていますが、この部分は下記のようにするのが正しいと思います

function CDT(){
var text = '販売終了まで :';
// var tl = new Date('2040/06/25 00:00:00');
var tl = new Date();
(略）

（それか、body内でのid指定が誤っている可能性）

動くようにした全体のサンプルコードは以下です。(上記のコメント部分を削除し、body等を追加しただけです)(コードの修正・追記を最小限にしています)

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="UTF-8">
6    <title>カウントダウンタイマー</title>
7</head>
8
9<body>
10    <div id="text"></div>
11    <div id="CDT"></div>
12</body>
13<script>
14    function CountdownTimer(elm, tl, mes) {
15        this.initialize.apply(this, arguments);
16    }
17    CountdownTimer.prototype = {
18        initialize: function (elm, tl, mes) {
19            this.elem = document.getElementById(elm);
20            this.tl = tl;
21            this.mes = mes;
22        }, countDown: function () {
23            var timer = '';
24            var today = new Date();
25            var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
26            var hour = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
27            var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
28            var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
29            var milli = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 10) % 100;
30            var me = this;
31            if ((this.tl - today) > 0) {
32                if (day) timer += '<span class="day">' + day + '日と</span>';
33                if (hour) timer += '<span class="hour">' + hour + '時間</span>';
34                timer += '<span class="min">' + this.addZero(min) + '分</span><span class="sec">' + this.addZero(sec) + '秒</span><span class="milli">' + this.addZero(milli) + '</span>';
35                this.elem.innerHTML = timer;
36                tid = setTimeout(function () { me.countDown(); }, 10);
37            } else {
38                this.elem.innerHTML = this.mes;
39                return;
40            }
41        }, addZero: function (num) { return ('0' + num).slice(-2); }
42    }
43    function CDT() {
44        var text = '販売終了まで :';
45        var tl = new Date();
46        tl.setDate(tl.getDate() + 3);
47        var timer = new CountdownTimer('CDT', tl, '終了しました。');
48        timer.countDown();
49        target = document.getElementById("text");
50        target.innerHTML = text;
51    }
52    window.onload = function () {
53        CDT();
54    }
55</script>
56
57</html>