このアプリは起動と同時に1秒ごとにカウントを表示していきます。プログラムは以下のようになります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
var timer_id;
var count = 0;
function increment() {
count++;
update();
}
function reset() {
if (count > 0 && confirm('カウンターをリセットしますか?')) {
count = 0;
update();
}
}
function update() {
var str = '0000' + count;
str = str.substring(str.length - 4, str.length);
var digits = $('.counter-digit');
for (var i = 0; i < str.length; i++) {
digits.get(i).src = 'img/no_0' + str[i] + '.png'
}
}
$(function() {
$('.count-button').on("touchend", increment);
$('.reset-button').on("touchend", reset);
$('.counter').on("touchend", function(){
if(timer_id >= 0) {
clearInterval(timer_id);
timer_id = -1;
} else {
timer_id = setInterval( function () {
increment();
} , 1000 );
};
});
update();
timer_id = setInterval( function () {
increment();
} , 1000 );
})
</script>
</head>
<body>
<div class="counter">
<img src="img/no_00.png" width="55" class="counter-digit">
<img src="img/no_00.png" width="55" class="counter-digit">
<img src="img/no_00.png" width="55" class="counter-digit">
<img src="img/no_00.png" width="55" class="counter-digit">
</div>
<div class="reset-button-wrapper">
<button class="reset-button"><img src="img/btn_reset_normal.png" width="64"></button>
</div>
<button class="count-button"><img src="img/btn_count_normal.png" width="127"></button>
</body>
</html>
また、今回からOnsen-UI（5章）を始めました。今日は 5-6 Onse UI Master-Detailテンプレートまでやりました。次回までの課題として、表示内容を次のように変えてみることになりました。
- 表示内容を日本語にする
- 項目タイトルは名前にする
- 項目説明はメール内容にする
- できれば、左の四角の箱に写真を出す
0 件のコメント:
コメントを投稿