jQueryを使ってカウントダウン処理

jQueryを使って、カウントダウンの実装方法についてご教示お願いいたします。

20時～14時までのカウントダウンが秒単位で、残り何時間何分何秒と表示され、
また、14時～20時までカウントダウンが秒単位で残り何時間何分何秒と
表示されるように教えていただけますでしょうか。

追加の質問です。
20時から14時まで、「A」という画像が表示し、14時から20時までは、「B」という画像が表示されるように、タイマーと紐づけることはできますでしょうか。

度々の質問となり、恐縮ですがご回答お願いいたします。

よろしくお願いいたします。

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

回答3件

hirohiro さん

ご連絡遅くなり申し訳ございません

ご回答ありがとうございます。
こちらで、実装をさせて頂きます。

よろしくお願いいたします。

14時と20時になったときに、タイマーはゼロ秒で、14時と20時1秒から残りの時間表示です。

投稿2015/09/07 04:45

mka0515

総合スコア8

ベストアンサー

一応動くと思いますが……Date()のメソッド使ってもっと単純に書けそうな気がします。
jQueryも殆ど使ってないです。Date用の専用ライブラリってありましたっけ？

Javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
2<script type="text/javascript">
3$(function(){
4  setInterval( function(){
5    date = new Date();
6    hour = date.getHours(); 
7    diff = hour*1000*60*60 + date%(1000*60*60);
8    txt = "";
9    if(hour < 14){
10      txt = "14時まで残り";
11      pt = 14*1000*60*60 - diff;
12    } else if(hour > 20){
13      txt = "翌日14時まで残り";
14      pt = (24+14)*1000*60*60 - diff;
15    } else {
16      txt = "20時まで残り";
17      pt = 20*1000*60*60 - diff;
18    }
19    h = Math.floor(pt/(1000*60*60));
20    m = Math.floor(pt%(1000*60*60)/(1000*60));
21    s = Math.floor(pt%(1000*60)/(1000));
22    $("#time").text(txt + h + "時間" + m + "分" + s + "秒");
23  }, 1000);
24});
25</script>
26
27<p id="time"></p>

投稿2015/09/06 16:18

hirohiro

総合スコア2068

hirohiro

2015/09/06 16:27

--- diff = new Date(); diff.setHours(14); diff.setMinutes(0); diff.setSeconds(0); new Date(diff); //Mon Sep 07 2015 14:00:00 GMT+0900 (東京 (標準時)) new Date(); //Mon Sep 07 2015 01:17:36 GMT+0900 (東京 (標準時)) new Date(diff - new Date()); //Thu Jan 01 1970 21:42:09 GMT+0900 (東京 (標準時)) ----- 最後の部分[Thu Jan 01 1970 12:42:24 GMT+0900 (東京 (標準時))]を期待してたのですが、予想外の出力になってしまって時間切れです。