2011年01月13日

jqueryでグルーポン風タイマー

お願いします♪いいねとかつぶやいたりして下さい
 
パシャログ大先生を参考に
http://c-brains.jp/blog/wsg/10/09/22-145004.php

特にCSS部分。

<style type="text/css">

.timeformat {
	width:200px;
	padding-left:35px;
	background:url(/app/webroot/img/tokei.jpg) no-repeat left center;
}

.timeformat span.int {
	font-size: 20px;
}

.timeformat span.cap {
	
}

.timeformat div.day {
	color:#666;
	font-size:10px;
	margin:0 0 -10px 0;
}

</style>
<!-- あ-->
<script type='text/javascript' src='/app/webroot/js/jquery.countdown.js'></script>
<script type='text/javascript' src='/app/webroot/js/jquery.countdown-ja.js'></script>

<script type="text/javascript">
//現在日時を取得
var liftoffTime = new Date();
var targetSec = 1295888670000;//php のtime();タイムスタンプに 000 を付ける必要がある。

liftoffTime.setTime(targetSec);
j$(function() {
	  j$('#Timer').countdown({ 
		until: liftoffTime,
		format: 'dHMS',
		description: '',
		layout: '<div class="day">{dn}日...</div>残り: <span class="int">{hn}</span><span class="cap">時</span> <span class="int">{mn}</span><span class="cap">分</span> <span class="int">{sn}</span><span class="cap">秒</span>',
		}
	);
});

</script>

<div id="Timer" class="timeformat">
[ ここの内容が切り替わります ]
</div>


これでOK。
○○までのカウントダウンをしたいと言うときは、○○にはタイムスタンプが入る。
ただし、phpの time(); でやったものの最後に 000 を付ける必要がある。

また、上記プログラムをphpで書くと以下のようになる。

/*
    指定したタイムスタンプまで、
    あと ○日 ○時間 ○分 ○秒
    を取得する
    @params int $endstamp いつまで?タイムスタンプ。
    @params int $time 現在のタイムスタンプ。なければ現在。
    @return array 残りの ○日 ○時間 ○分 ○秒 を配列で返す
                  現在より古ければ false
                  
*/
function countDown($endstamp , $time = '')
{
    if($time = ''){
        $time = time();
    }
    
    $seed = $endstamp-time();
    
    $res = false;
    if($seed > 0){
        $last = array();
        $amari = array();
        $last['day'] = $seed/86400;
        
        $amari['day'] = $seed%86400;
        $last['hour'] = $amari['day']/3600;
        
        $amari['hour'] = $amari['day']%3600;
        
        $last['minutes'] = $amari['hour']/60;
        
        $last['seconds'] = $amari['hour']%60;
        
        $res = array();
        foreach($last as $key => $v){
            $res[$key] = floor($v);
        }
    }
    
    
    return $res;
}


関連するタグ: PHP cakephp javascript
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ