タイマー ver1.0

「メニュー」はこのWikiにログインしているメンバーか管理者に閲覧を許可しています。

タイマーアプリです。

使い方

現在時刻を基準に、何時間何分何秒後に通知するかを指定し、タイマーをセットします。
セットした時間が来たら自動的に通知します。
セットしたタイマーの時間は下の方に表示されます。

使っているめぼしい機能

ChromeのNotification APIを使っています。
HTML5から追加された数値用の入力コンポーネント（？）を使ってます。
数値のステップと範囲が指定できる上に、JavaScriptで数値を取り出すときにも、エラー処理が必要なparseIntメソッドを使わなくてよいので便利です。

ソースコード

manifest.json

{
  "name": "Timer",
  "description": "現在時刻の表示",
  "version": "1.0",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "permissions": [
  	"notifications"
  ]
}

main.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
 <link rel="stylesheet" href="./css/Timer.css">
    <script src="./js/Timer.js"></script>
</head>
<body onload="javascript:disptime()">
<div id="time">
時間がここに表示されます。
</div>
<form>
Timer Set After<input type="number" id="hours" step="1" min="0" max="23" value="0">: <!--実際は開業しない-->
<input type="number" id="minutes" step="1" min="0" max="59" value="0"> <!--実際は開業しない-->
<input type="number" id="seconds" step="1" min="0" max="59" value="0"> <!--実際は開業しない-->
<input type="button" value="Set" onclick="javascript:setTimer()">
</form>
<div id="timer">
</div>
</body>
</html>

Timer.css

body {
	text-align : center;
}

Timer.js

var timers = [];			//タイマーの配列

//現在時刻を表示する
function disptime(){
var d = new Date();

document.getElementById("time").innerHTML = timeToString(d);
window.setTimeout("disptime()", 1000);
timerCheck(d);
}

//タイマーセット
function setTimer(){
var new_timer = new Date();	//現在時刻
var form = document.forms[0];
//入力された時、分、秒を足す
new_timer.setHours(form.hours.valueAsNumber + new_timer.getHours());
new_timer.setMinutes(form.minutes.valueAsNumber + new_timer.getMinutes());
new_timer.setSeconds(form.seconds.valueAsNumber + new_timer.getSeconds());
new_timer.setMilliseconds(0);
d = new_timer.getTime();

//タイマー配列に挿入ソート（後ろから）
for(var i=timers.length;i>0;i--){
	timer = timers[i-1].getTime();
	if(timer < d){
		timers[i] = new_timer;
		break;
	} else {
		timers[i] = timers[i-1];
	}
}
if(i==0){
	timers[0] = new_timer;
}
dispTimers();
}

//タイマーにセットされた時間を表示
function dispTimers(){
var timer_text = "TIMER:<br />";
var timer;
for(var i=0;i<timers.length;i++){
		var timer = timers[i];
		timer_text += timeToString(timer) + "<br />";
	}
	document.getElementById("timer").innerHTML = timer_text;
}

function timeToString(d){
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
if(hours < 10){
	hours = "0" + hours;
}
if(minutes < 10){
	minutes = "0" + minutes;
}
if(seconds < 10){
	seconds = "0" + seconds;
}

return hours + ":" + minutes + ":" + seconds;
}

//時間が過ぎたタイマーが無いかチェック
function timerCheck(d){
now = d.getTime();
flg = false;
for(var i=0;i<timers.length;i++){
	var timer = timers[i].getTime();
	if(timer < now){
		flg = true;
	} else {
		break;
	}
}
if(flg){
	latest_timer = timers[i-1];
	timers.splice(0,i);	//時間が過ぎたタイマーは消す
	notify("時間です！","タイマーにセットされた " + timeToString(latest_timer) + " が過ぎました。");
	dispTimers();
}
}

//通知windowを出すためのメソッド
function notify(title, message){
   //マニフェストファイルへの記述で許可されている
   if ( webkitNotifications.checkPermission() == 0 ) {
       
       var notify_window = webkitNotifications.createNotification('icon_48.png', title, message);
       notify.window.show();
       
   } else {
       //デスクトップへの通知許可を要求する
       window.alert(message);
       webkitNotifications.requestPermission();
   }
}

コメント募集！

何かコメントあれば下さい！

「タイマー ver1.0」をウィキ内検索

最終更新：2012年04月17日 22:07

名前:
コメント: