Created
June 12, 2013 01:27
-
-
Save chikoski/5762264 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @CHARSET "UTF-8"; | |
| body{ | |
| background-color: #111; | |
| background-repeat: no-repeat; | |
| } | |
| #clock{ | |
| font-family: 'VT323', monospace, cursive; | |
| color: #ff8c00; | |
| font-size: 120px; | |
| text-align: center; | |
| position: absolute; | |
| left: 0; | |
| bottom: 50%; | |
| width: 100%; | |
| } | |
| .hide{ | |
| display: "none"; | |
| } | |
| .morning{ | |
| background-image: url(../img/morning.jpg); | |
| } | |
| .morning #clock{ | |
| color: #eee; | |
| } | |
| .sunset{ | |
| background-image: url(../img/sunset.jpg); | |
| } | |
| .sunset #clock{ | |
| color: #111; | |
| } | |
| .night{ | |
| background-image: url(../img/night.jpg); | |
| } | |
| .night #clock{ | |
| color: #eee; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Flickr - Clock</title> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/app.css"> | |
| <link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body id="body"> | |
| <div class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container-fluid"> | |
| <span class="brand">Clock</span> | |
| <ul class="nav"> | |
| <li class="active"><a href="flickr.html">Flickr</a></li> | |
| <li><a href="index.html">Clock</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-fluid"> | |
| <div id="photos"></div> | |
| <div id="error" class="hide"> | |
| <div class="alert alert-block alert-error"> | |
| Flickr と通信できませんでした。 | |
| </div> | |
| <a class="btn btn-large btn-block" href="flickr.html">リトライする</a> | |
| <a class="btn btn-large btn-block btn-primary" href="index.html">時計を表示する</a> | |
| </div> | |
| </div> | |
| <script src="js/jquery-2.0.2.min.js"></script> | |
| <script src="js/flickr.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 時刻と時間帯との対応表 | |
| var periods =[ | |
| ["midnight", 3], | |
| ["dawn", 4], | |
| ["early morning", 6], | |
| ["morning", 10], | |
| ["day", 12], | |
| ["noon", 13], | |
| ["afternoon", 17], | |
| ["twilight", 18], | |
| ["dusk", 19], | |
| ["night", 22], | |
| ["midnight", 24] | |
| ]; | |
| // 時刻を時間帯を表す単語へ変える関数 | |
| var getPeriods = function(now){ | |
| var hour = now.getHours(); | |
| for(var i = 0; i < periods.length; i++){ | |
| if(hour < periods[i][1]){ | |
| return periods[i][0]; | |
| } | |
| } | |
| }; | |
| // Flickr の写真情報をもとに、写真を表示するための HTML 要素を作成する関数 | |
| var createPhotoElement = function(photo){ | |
| var elm = document.createElement("img"); | |
| elm.setAttribute("class", "img-polaroid flickr"); | |
| elm.setAttribute("src", photo.media.m); // メディア属性で写真の URL が参照できる。M サイズのものを表示する | |
| return elm; | |
| }; | |
| var displayPhotos = function(data){ | |
| if(data != null && data.items != null){ | |
| var elm = document.getElementById("photos"); | |
| var photo = data.items[0]; | |
| elm.appendChild(createPhotoElement(photo)); | |
| } | |
| }; | |
| var displayError = function(){ | |
| var elm = document.getElementById("error"); | |
| elm.setAttribute("class", ""); | |
| }; | |
| window.onload = function(){ | |
| var now = new Date(); | |
| var period = getPeriods(now); | |
| // Flickr を検索するための設定 | |
| var con = $.ajax({ | |
| url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", // 通信先のURL | |
| // 検索のためのパラメータ設定 | |
| data: { | |
| format: "json", | |
| tags: period | |
| }, | |
| // 通信方式 | |
| type: "GET", | |
| // 期待するデータ形式 | |
| dataType: "json" | |
| }); | |
| con.success(displayPhotos); // 通信が成功した時に呼ばれる関数を登録 | |
| con.fail(displayError); // 通信が失敗したときに呼ばれる関数を登録 | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Clock</title> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/app.css"> | |
| <link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body id="body"> | |
| <div class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container-fluid"> | |
| <span class="brand">Clock</span> | |
| <ul class="nav"> | |
| <li><a href="flickr.html">Flickr</a></li> | |
| <li class="active"><a href="index.html">Clock</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-fluid"> | |
| <div id="clock"></div> | |
| </div> | |
| <script src="js/jquery-2.0.2.min.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment