[jQuery]簡単なカウントダウンの実装

Read More

jQueryを使ったカウントダウンの実装。


HTMLページ上でカウントが動的に切り替わっていく。
カウントダウンだけじゃあれなので、その後に指定したjavascriptの動作をするように作った。


下記のコードをファイルに保存し実行すると10からカウントダウンが始まり0で指定したURLに飛ぶ。

■サンプルコード:sample.htmlで保存してアクセス
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" charset="UTF-8"></script>
<script type="text/javascript">
<!--
function countdown($call, $count) {
  $('#count').text($count);
    if($count) {
      setTimeout(function() {
        $count = $count-1;
        countdown($call, $count);
      }, 1000);
    }else {
      $('body').append($('<scr'+'ipt>'+$call+';<\/scr'+'ipt>'));
  }
}// end function
$(function() {
  countdown('window.location.replace("http://xirasaya.com")', 10);
});
//-->
</script>
</head>
<body>
<span id="count">10</span> 秒後にジャンプします。
</body>
</html>



カウントダウンのデモはこちら↓
http://xirasaya.com/demo/7



■簡単な解説
countdown()の第1引数に実行したいjavascriptを指定すると、第2引数で指定した時間経過後に実行される。
第1引数のjavascriptは文字列として指定するためシングルクォートかダブルクォートでくくる必要がある。
第2引数で0を指定すると待ち時間なく即実行となる。



指定した文字列をjavascriptとして実行する部分、もう少しスマートな書き方はないかなー。
うーん、調べるのめんどい…







参考サイト)
・jQueryで動的にscriptタグを生成して実行させる方法 | creator note
http://creator.cotapon.org/articles/javascript/jquery%E3%81%A7%E5%8B%95%E7%9A%84%E3%81%ABscript%E3%82%BF%E3%82%B0%E3%82%92%E7%94%9F%E6%88%90%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95






Comments(7)

1  みやび  2013/07/06 (土) 15:34 ID:lrouJoP15
普通にevalじゃダメなんですか?

http://splitchin.com/tech/2011/05/29/eval%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%AA%E3%81%84%E3%80%82-javascript%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/

もし自分が実装するなら無名関数で
var call = function(){
window.location.replace("http://xirasaya.com");
}
countdown(call, 10);

function countdown(call, count) {
// countを1ずつ減らす
...
// callを実行
call();
}

こんな感じで考えますかね、
(IDEさんが文字列のコードを評価してくれないので)
仕事中なんで後でもうちょっと考えてみます。

2  みやび  2013/07/06 (土) 15:36 ID:lrouJoP15
さっきの例じゃ無名関数としては微妙だった…

さっきのcall変数を更に噛み砕いて…
countdown(
function() {
window.location.replace("http://xirasaya.com");
}
, 10);

うーんこの書き方じゃ美しくない…

3  シラサヤ  2013/07/06 (土) 15:50 ID:rNZfAk415
javascriptにもeval()あるんだな。
早速テストしてみるよ。

つーか休日出勤ご苦労さん



4  みやび  2013/07/08 (月) 11:51 ID:sSC6doE15
jQueryのメソッドを拡張してかっちょよく…みたいなこと考えましたけど、
リダイレクト以外に使い道が無さそうですので、
記事内のソースコードのようにさっくり書くのが良さそうですね。

PS:
PHP5.3の機能であるnamespace使った開発したいです
PHP5.4のトレイトとPHP5.5のジェネレータは気になりますが、
糞みたいなスパゲティコードの温床になりそうで怖いです

5  シラサヤ  2013/07/08 (月) 21:11 ID:gbFE5sr15
別のことやっててまだeval()のテストできてない。
きっともう少しスマートに書ける…はず…だよね…?
まあ時間見つけて調べよう。


しっかしPHP5系の新しい機能って結構増えてるんだねえ。
オレもしっかりアンテナはらなきゃなー



6  びるぱん  2013/07/08 (月) 21:13 ID:xTZZORJ15
真っ先にこれ思い浮かんだわ。

<meta http-equiv="refresh" content="秒数;URL=URL">

7  シラサヤ  2013/07/08 (月) 21:19 ID:gbFE5sr15
>びるぱん
メタタグ使うのもありだね。
あ、メタタグのrefreshってtargetを指定しても'_self'以外は効かないことがあるんじゃなかったっけ?
うろおぼえだけど…


まあ今回はカウントダウンの秒数をページ上に表示したかったのさ。

早速ここのコメント機能にも試しに実装してみた。
コメント投稿後にトップにとぶよー