カウントダウンタイマーの終了の表示

Yahoo!知恵袋回答より
上記リンクを参考にそのサイトにアクセスしたら開始されるカウントダウンタイマーを作成してみました。

こちらの方法ですと終了した際に -(マイナス表記)でまたカウントが始まってしまいます。
-1秒、-２秒、、、、と

ですので定めた時間で終了したら「終了しました」などのテキストを表示するようにしたいのですが
調べてもうまくできずでしたので詳しい方助けていただけると嬉しいです。

html
1    <div class="cdown" data-cdown-min="15"></div>
2

css
1   
2    .cdown,
3    .cdown-done,
4    .cdown-loop {
5      font-size: 10vw;
6      color: #FFF484;
7      font-weight: bold;
8      position: relative;
9      top: 10vw;
10      left: 32vw;
11      width: 100%;
12    }
13

javascript
1   
2    var cdown = new Object();
3  cdown.elem = document.querySelectorAll(".cdown");
4  cdown.tmr = new Array();
5  cdown.getTime = function( I ){
6  var attributes = cdown.elem[ I ].attributes;
7  for(var type, value, i=0;i<attributes.length;i++){
8  type = attributes[ i ].name.match(/(^data-cdown-)(.+)/);
9  if( type ){
10  value = parseInt( attributes[ i ].value, 10 ) || 0 ;
11  return ( type[2]=="min" ) ? value*60 : value ;
12  }
13  }
14  return null;
15  }
16  cdown.start = function( I ){
17  var sec = cdown.getTime( I );
18  if( sec==null ){ return }
19  var target = ( new Date() ).getTime()+( sec*1000 );
20  cdown.tmr[ I ] = setInterval( function(){
21  var now = ( new Date() ).getTime();
22  var left = target - now;
23  var output = {
24  "min" : Math.floor( ( left%( 1000*60*60 ) )/( 1000*60 ) ),
25  "sec" : Math.floor( ( left%( 1000*60 ) )/( 1000 ) ),
26  "ms" : left%1000 }
27  cdown.elem[ I ].textContent = ""
28  +( "0"+output.min ).slice(-2)+" åˆ† "
29  +( "0"+output.sec ).slice(-2)+" ç§’ "
30  +( "00"+output.ms ).slice(-2);
31}, 20 );
32  }
33  window.addEventListener( "load", function(){
34  for(var i=0;i<cdown.elem.length;i++){ cdown.start( i ) }
35  }, false );
36

###わかったこと

cssの　.cdown-loopを削除するとタイマー自体が機能しなくなってしまう

無知で素人ゆえに恐縮ですがお力いただけますと幸いです。

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

回答2件

ベストアンサー

こんにちは、以下のコードでどうでしょうか？

Javascript
1window.addEventListener(
2    "load",
3    function () {
4        var cdown = new Object();
5        cdown.elem = document.querySelectorAll(".cdown");
6        cdown.tmr = new Array();
7        cdown.getTime = function (I) {
8            var attributes = cdown.elem[I].attributes;
9            for (var type, value, i = 0; i < attributes.length; i++) {
10                type = attributes[i].name.match(/(^data-cdown-)(.+)/);
11                if (type) {
12                    value = parseInt(attributes[i].value, 10) || 0;
13                    return type[2] == "min" ? value * 60 : value;
14                }
15            }
16            return null;
17        };
18        cdown.start = function (I) {
19            var sec = cdown.getTime(I);
20            if (sec == null) {
21                return;
22            }
23            var target = new Date().getTime() + sec * 1000;
24            cdown.tmr[I] = setInterval(function () {
25                var now = new Date().getTime();
26                var left = target - now;
27                var output = {
28                    min: Math.floor((left % (1000 * 60 * 60)) / (1000 * 60)),
29                    sec: Math.floor((left % (1000 * 60)) / 1000),
30                    ms: left % 1000,
31                };
32                console.log(left);
33                if (left > 0) {
34                    cdown.elem[I].textContent = "" + ("0" + output.min).slice(-2) + " 分 " + ("0" + output.sec).slice(-2) + " 秒 " + ("00" + output.ms).slice(-2);
35                } else {
36                    cdown.elem[I].textContent = "終了しました";
37                    window.clearInterval(cdown.tmr[I]);
38                }
39            }, 20);
40        };
41        for (var i = 0; i < cdown.elem.length; i++) {
42            cdown.start(i);
43        }
44    },
45    false
46);
47