jsWaffleでAndroidアプリを作ろう！デジタル時計編①
サクウェブＴＶはコチラ↓↓↓
今回は簡単なデジタル時計を作ります。
サクっといきますので、すぐ終わりますが。
開発環境の準備
jsWaffleでAndroidアプリを作ろう！インド式九九編①
を参考にして、jsWaffleでの開発環境を作ってください。
開発開始
wwwフォルダのindex.htmlを以下のように書きかえてください。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jsWaffle DEMO</title> <script type="text/javascript" src="jsWaffle.js"></script> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/script.js"></script> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div id="times"></div> </body> </html>
www/css/style.cssな感じでstyle.cssを、www/js/script.jsな感じでscript.jsを作成し以下のように記述します。
style.css
*{
padding:0;
margin:0;
}
body{
background:#000000;
color:#FFFFFF;
}
#times{
text-align:center;
font-size:25px;
border-top:2px solid #ffffff;
border-bottom:2px solid #ffffff;
padding:10px;
margin-top:100px;
background: rgb(30,87,153);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
}
script.js
$(function(){
clock($("#times"));
function clock(target){
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
h = h<10?"0"+h:h;
m = m<10?"0"+m:m;
s = s<10?"0"+s:s;
var time_str = h + ":" + m + ":" + s;
target.html(time_str);
setTimeout(function(){
clock(target)
},1000);
}
});
はい。できました！
サクっと作りましたが、このclock()関数は結構便利かもです（？）
clock()の引数には時間を表示したい要素のjQueryオブジェクトを渡してあげれば、
そこに時間が勝手に表示されます。
あとはＣＳＳなんかでカッコよくデザインすればそれなりの時計になります。
次回、この実行結果の動画と、数字を画像でカスタマイズする方法を書きます。
＞＞jsWaffleでAndroidアプリを作ろう！デジタル時計編②＜＜
