スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


--/--/--(--)/--:--:--:コメント(-)|トラックバック(-)

JavaScript+jQueryでタイマーらしきものを作ってみる

主にカップめんを作る時に便利!
キッチンタイマーの電源切れたときように。
記事を見る際には、JavaScriptをOnにしてください。(そうしないとうまく表示されません)



※まだリセットボタンなの入力制限なのができていない未完成品。
 リセットはF5、入力は半角英数字で。を守れば問題ない。
 あと決まった時間経ったらalertがまだでるだけ。

サンプル


ソース解説
正直解説に向くような構造ではないんだけど((
読みにくいからTabで空白入れてみようかと思ったけど、
記事書くときにTabでできないからちょっとスペース入れるてるだけ


Script部分
$(function(){
$("#set").click(function(){
  var a=$("#hour").val();
  var b=$("#minute").val();
  var c=$("#second").val();
  if(c>=60){do{var c=c-60;b++;}while(c>60);}
  if(b>=60){do{var b=b-60;a++;}while(b>60);}
  $("#outhour").text(a);
  $("#outminute").text(b);
  $("#outsecond").text(c);

  if(a!=0||b!=0||c!=0){$("#start").fadeIn(1500);}
});

$("#start").click(function(){
  $("#set").attr("value","Reset");
  $("#stop").fadeIn(0).click(function(){clearInterval(Count);$("#reset").fadeIn();});
  var a=$("#outhour").text();
  var b=$("#outminute").text();
  var c=$("#outsecond").text();
  Count = setInterval(function(){
    if(a==0 && b==0 && c==0){clearInterval(Count);alert("Time out");}
    if(c==0){
      if(b!=0){b--;c=60;$("#outminute").text(b);$("#outsecond").text(c);}
      else{
        if(a!=0){
          a--;b=59;c=59;
          $("#outhour").text(a);
          $("#outminute").text(b);
          $("#outsecond").text(c);
        }
      }
    }else{c--;$("#outsecond").text(c);}
  },1000);
});
});

body内部
めんどくさいのでform使ってない。これでも稼働するし。
(button使えばいいのに)
00: 00: 00
: :
解説

まず後ろにhtml置いてありますが、そちらの方に軽く目を通さないと理解できないと思います。
(張る順番間違えた。
書いてないですが、#start,#stop{display:none;}もどこかに書いておいてください。


1.setを押した場合の動作。
まず入力欄3つ(左から時:分:秒)に入っている数値を3つ変数に入れます。
その次のif文で、72秒とかだったら1分12秒となるように、
時、分、秒の調整。
これが終わった後に、上に表示されてる数字をセットした時間にします。

その後、
0:0:0つまり初期状態以外の状態にタイマーがセットされたら
スタートボタンを表示。

2.startを押した時の動作
まずリセットボタンと、ストップボタンを作成。
リセットボタン未作成。
ストップボタン作成途中です。(一応止まります)
変数のスコープ問題でめんどくさいのでここでストップボタンの機能も作ってます。


そのあとにタイマーの時間をそれぞれ3つの変数に代入(変数のスコープの問題)

そしたらタイマースタート。
setIntervalを1000ミリ秒(1秒)ごとに作動させます。
1秒ごとに秒の数から-1を行い。
その時に秒が0なら分を-1にして秒を+60にする。
のような繰り下げの作業がif文の部分です。
0秒になったらalertでTimeOutと出ます。

正直自分が使えればいいとおもっていたので、割と適当。
キッチンタイマーが見つからない時にそれっぽいものがあればいいとおもったので、
細かいところは全部無視。(1秒ぐらいずれてても(ry

2012/03/17(土)/22:31:17:コメント(0)|トラックバック(0)
コメントの際の注意。
・宣伝・同じ内容の連投は削除等の対象。
・質問等は、しっかり考えてから行ってください。
 聞けば何でも教えてくれるというのは間違いです。
・コメントの返信方法が確立していないので、返せない場合があります(´・ω・`)
・http://とhttps://が禁止ワードとなっています。
 コメント本文のURL入力は頭のhを抜くなり、なんなりしてください
name:

title:

Mail_address:

URL:

comment:

パスワード:

管理者にだけ表示を許可する
トラックバックURL

プロフィール

猫と馬

Author:猫と馬
相互リンク希望の方はこちらにコメしてください
閲覧推奨環境
現在不明

フリーエリア

blogram投票ボタン
fc2ブログランキング 人気ブログランキングへ

↑から買い物をしてくれると管理人が喜びます

カテゴリ

リンク

月別アーカイブ

リンク・記事の紹介(引用)について。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。