SlideShare a Scribd company logo
1 of 5
パートナーコース#2 Javascript

       (16) タイマー




          ver.1.0       1
16-0.html 前回の復習
               function showdate(){
                   var today = new Date();
                   var month = today.getMonth() + 1;
                   var date = today.getDate();
                   alert("今日は" + month + "月" + date + "日です。
               ");
               }



読み込まれる
と・・・                       bodyタグに
                           onload=“showdate()”
                           と書きます。




                 ver.1.0                                      2
16-1.html setTimeout
script
function setBomb(){
   setTimeout(bomb,3000);
}
function bomb(){
   alert("ドカン!");
   document.body.style.backgroundColor = "red";
}



    setTimeout(関数名,時間)を使うと、時間がたった後に関数を実
    行できます。これをタイマーといいます。


         ・関数名には()をつけません。
         ・時間は、「ミリ秒」(1秒の1000分の1)で設定します。



                                   ver.1.0        3
16-2.html clearInterval
script
var timer;

function setBomb(){
   timer = setTimeout(bomb,3000);
}
function bomb(){
   alert("ドカン!");
   document.body.style.backgroundColor = "red";
}
function clearBomb(){
   clearInterval(timer);
}


    setTimeoutの返り値をclearIntervalに渡すと、タイマーがキャン
    セルされます。




                                   ver.1.0        4
16-3.html setInterval
script
var timer;

function setBomb(){
   timer = setInterval(bomb,1000);
}
function bomb(){
   alert("ドカン!");
   document.body.style.backgroundColor = "red";
}
function clearBomb(){
   clearInterval(timer);
   document.body.style.backgroundColor = "white";
}


    setTimeoutの代わりにsetIntervalを使うと、指定した関数が繰り
    返し実行されます。




                                   ver.1.0          5

More Related Content

What's hot

Haskell超初心者勉強会11
Haskell超初心者勉強会11Haskell超初心者勉強会11
Haskell超初心者勉強会11Takashi Kawachi
 
Tarantubeでメッセージキューを使い倒す
Tarantubeでメッセージキューを使い倒すTarantubeでメッセージキューを使い倒す
Tarantubeでメッセージキューを使い倒すMasashi Umezawa
 
研究生のためのC++ no.2
研究生のためのC++ no.2研究生のためのC++ no.2
研究生のためのC++ no.2Tomohiro Namba
 
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題Makoto Setoh
 
Incanterの紹介
Incanterの紹介Incanterの紹介
Incanterの紹介mozk_
 

What's hot (13)

Haskell超初心者勉強会11
Haskell超初心者勉強会11Haskell超初心者勉強会11
Haskell超初心者勉強会11
 
Lt 111217
Lt 111217Lt 111217
Lt 111217
 
Tarantubeでメッセージキューを使い倒す
Tarantubeでメッセージキューを使い倒すTarantubeでメッセージキューを使い倒す
Tarantubeでメッセージキューを使い倒す
 
Qt × Reactive Extensions
Qt × Reactive ExtensionsQt × Reactive Extensions
Qt × Reactive Extensions
 
About Jobs
About JobsAbout Jobs
About Jobs
 
RGtk2入門
RGtk2入門RGtk2入門
RGtk2入門
 
研究生のためのC++ no.2
研究生のためのC++ no.2研究生のためのC++ no.2
研究生のためのC++ no.2
 
Node handson
Node handsonNode handson
Node handson
 
R新機能抄出
R新機能抄出R新機能抄出
R新機能抄出
 
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
 
Coqでsprintf
CoqでsprintfCoqでsprintf
Coqでsprintf
 
Incanterの紹介
Incanterの紹介Incanterの紹介
Incanterの紹介
 
Coqでsprintf
CoqでsprintfCoqでsprintf
Coqでsprintf
 

Viewers also liked

Enoc martinez algo verdaderamente sorprendente-6147
Enoc martinez algo verdaderamente sorprendente-6147Enoc martinez algo verdaderamente sorprendente-6147
Enoc martinez algo verdaderamente sorprendente-6147Enoc Martinez
 
ベクトル総研 S2.避難シミュレーション
ベクトル総研 S2.避難シミュレーションベクトル総研 S2.避難シミュレーション
ベクトル総研 S2.避難シミュレーションvrihomepage
 
Un solo vaso_de_cerveza-9953
Un solo vaso_de_cerveza-9953Un solo vaso_de_cerveza-9953
Un solo vaso_de_cerveza-9953claudio saldivar
 
Coneix terrassa en anglès món idiomes
Coneix terrassa en anglès món idiomesConeix terrassa en anglès món idiomes
Coneix terrassa en anglès món idiomesmalcolm1234
 
Redes sociais osório
Redes sociais osórioRedes sociais osório
Redes sociais osórioosorioramos
 
Edat moderna
Edat modernaEdat moderna
Edat modernaamistatcs
 
Basma, Dunia, Eloy
Basma, Dunia, EloyBasma, Dunia, Eloy
Basma, Dunia, Eloyamistatcs
 
休学×ソーシャル 企画書 Ver.1.0
休学×ソーシャル 企画書 Ver.1.0休学×ソーシャル 企画書 Ver.1.0
休学×ソーシャル 企画書 Ver.1.0Yasuhiro Ogata
 
La Mariposayla Flor
La Mariposayla FlorLa Mariposayla Flor
La Mariposayla Floredwin gomez
 
Estaciones
EstacionesEstaciones
Estacionesreme30
 
el relieve de España
el relieve de Españael relieve de España
el relieve de Españacprgraus
 
クイックスタートガイド|利用者編 | SmartBiz+
クイックスタートガイド|利用者編 | SmartBiz+クイックスタートガイド|利用者編 | SmartBiz+
クイックスタートガイド|利用者編 | SmartBiz+SmartBiz+
 

Viewers also liked (20)

Ofimatica 222
Ofimatica 222Ofimatica 222
Ofimatica 222
 
Lajaula mci emeth
Lajaula mci emethLajaula mci emeth
Lajaula mci emeth
 
Guia clase 3 terminada
Guia clase 3 terminadaGuia clase 3 terminada
Guia clase 3 terminada
 
Enoc martinez algo verdaderamente sorprendente-6147
Enoc martinez algo verdaderamente sorprendente-6147Enoc martinez algo verdaderamente sorprendente-6147
Enoc martinez algo verdaderamente sorprendente-6147
 
ベクトル総研 S2.避難シミュレーション
ベクトル総研 S2.避難シミュレーションベクトル総研 S2.避難シミュレーション
ベクトル総研 S2.避難シミュレーション
 
Un solo vaso_de_cerveza-9953
Un solo vaso_de_cerveza-9953Un solo vaso_de_cerveza-9953
Un solo vaso_de_cerveza-9953
 
Comunidades
ComunidadesComunidades
Comunidades
 
Las 7 cabritas cristy
Las 7 cabritas cristyLas 7 cabritas cristy
Las 7 cabritas cristy
 
Coneix terrassa en anglès món idiomes
Coneix terrassa en anglès món idiomesConeix terrassa en anglès món idiomes
Coneix terrassa en anglès món idiomes
 
Guión podcast
Guión podcastGuión podcast
Guión podcast
 
Revistas (2)
Revistas (2)Revistas (2)
Revistas (2)
 
Redes sociais osório
Redes sociais osórioRedes sociais osório
Redes sociais osório
 
Edat moderna
Edat modernaEdat moderna
Edat moderna
 
Turismo en chiapas
Turismo en chiapasTurismo en chiapas
Turismo en chiapas
 
Basma, Dunia, Eloy
Basma, Dunia, EloyBasma, Dunia, Eloy
Basma, Dunia, Eloy
 
休学×ソーシャル 企画書 Ver.1.0
休学×ソーシャル 企画書 Ver.1.0休学×ソーシャル 企画書 Ver.1.0
休学×ソーシャル 企画書 Ver.1.0
 
La Mariposayla Flor
La Mariposayla FlorLa Mariposayla Flor
La Mariposayla Flor
 
Estaciones
EstacionesEstaciones
Estaciones
 
el relieve de España
el relieve de Españael relieve de España
el relieve de España
 
クイックスタートガイド|利用者編 | SmartBiz+
クイックスタートガイド|利用者編 | SmartBiz+クイックスタートガイド|利用者編 | SmartBiz+
クイックスタートガイド|利用者編 | SmartBiz+
 

Similar to タイマー

UniRxことはじめ
UniRxことはじめUniRxことはじめ
UniRxことはじめShoichi Yasui
 
Java9直前!最近のJava復習ハンズオン
Java9直前!最近のJava復習ハンズオンJava9直前!最近のJava復習ハンズオン
Java9直前!最近のJava復習ハンズオンHiroto Yamakawa
 
PostgreSQL - C言語によるユーザ定義関数の作り方
PostgreSQL - C言語によるユーザ定義関数の作り方PostgreSQL - C言語によるユーザ定義関数の作り方
PostgreSQL - C言語によるユーザ定義関数の作り方Satoshi Nagayasu
 
Async design with Unity3D
Async design with Unity3DAsync design with Unity3D
Async design with Unity3DKouji Hosoda
 
Boost9 session
Boost9 sessionBoost9 session
Boost9 sessionfreedom404
 
Effective java 勉強会
Effective java 勉強会Effective java 勉強会
Effective java 勉強会Takinami Kei
 
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_cccJEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_cccYujiSoftware
 
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~Unity Technologies Japan K.K.
 
Vue.js でタイマーを作る
Vue.js でタイマーを作るVue.js でタイマーを作る
Vue.js でタイマーを作るmizdra
 
HTMLの要素の選び方
HTMLの要素の選び方HTMLの要素の選び方
HTMLの要素の選び方TENTO_slide
 
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミングC++ マルチスレッドプログラミング
C++ マルチスレッドプログラミングKohsuke Yuasa
 
Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.Yuki Higuchi
 
cloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdfcloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdfKosuke Saigusa
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについてtako pons
 
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Toshio Ehara
 
werkkzeug3のGUI実装
werkkzeug3のGUI実装werkkzeug3のGUI実装
werkkzeug3のGUI実装Hisanari Otsu
 

Similar to タイマー (20)

UniRxことはじめ
UniRxことはじめUniRxことはじめ
UniRxことはじめ
 
イベント
イベントイベント
イベント
 
Java9直前!最近のJava復習ハンズオン
Java9直前!最近のJava復習ハンズオンJava9直前!最近のJava復習ハンズオン
Java9直前!最近のJava復習ハンズオン
 
PostgreSQL - C言語によるユーザ定義関数の作り方
PostgreSQL - C言語によるユーザ定義関数の作り方PostgreSQL - C言語によるユーザ定義関数の作り方
PostgreSQL - C言語によるユーザ定義関数の作り方
 
Async design with Unity3D
Async design with Unity3DAsync design with Unity3D
Async design with Unity3D
 
Boost9 session
Boost9 sessionBoost9 session
Boost9 session
 
Effective java 勉強会
Effective java 勉強会Effective java 勉強会
Effective java 勉強会
 
Junit4
Junit4Junit4
Junit4
 
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_cccJEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
JEP280: Java 9 で文字列結合の処理が変わるぞ!準備はいいか!? #jjug_ccc
 
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
 
Vue.js でタイマーを作る
Vue.js でタイマーを作るVue.js でタイマーを作る
Vue.js でタイマーを作る
 
HTMLの要素の選び方
HTMLの要素の選び方HTMLの要素の選び方
HTMLの要素の選び方
 
emc++ chapter32
emc++ chapter32emc++ chapter32
emc++ chapter32
 
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミングC++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
 
Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.
 
cloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdfcloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdf
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
 
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
 
Boost tour 1_40_0
Boost tour 1_40_0Boost tour 1_40_0
Boost tour 1_40_0
 
werkkzeug3のGUI実装
werkkzeug3のGUI実装werkkzeug3のGUI実装
werkkzeug3のGUI実装
 

More from TENTO_slide

グローバル変数
グローバル変数グローバル変数
グローバル変数TENTO_slide
 
ハッシュと配列
ハッシュと配列ハッシュと配列
ハッシュと配列TENTO_slide
 
配列とループ
配列とループ配列とループ
配列とループTENTO_slide
 
ループその3
ループその3ループその3
ループその3TENTO_slide
 
ループその2
ループその2ループその2
ループその2TENTO_slide
 
デザイン型人材育成のために
デザイン型人材育成のためにデザイン型人材育成のために
デザイン型人材育成のためにTENTO_slide
 
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料TENTO_slide
 

More from TENTO_slide (12)

復習その2
復習その2復習その2
復習その2
 
グローバル変数
グローバル変数グローバル変数
グローバル変数
 
関数
関数関数
関数
 
ハッシュと配列
ハッシュと配列ハッシュと配列
ハッシュと配列
 
配列とループ
配列とループ配列とループ
配列とループ
 
ループその3
ループその3ループその3
ループその3
 
ループその2
ループその2ループその2
ループその2
 
デザイン型人材育成のために
デザイン型人材育成のためにデザイン型人材育成のために
デザイン型人材育成のために
 
Html03
Html03Html03
Html03
 
Html02
Html02Html02
Html02
 
Html01
Html01Html01
Html01
 
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料
 

タイマー

  • 1. パートナーコース#2 Javascript (16) タイマー ver.1.0 1
  • 2. 16-0.html 前回の復習 function showdate(){ var today = new Date(); var month = today.getMonth() + 1; var date = today.getDate(); alert("今日は" + month + "月" + date + "日です。 "); } 読み込まれる と・・・ bodyタグに onload=“showdate()” と書きます。 ver.1.0 2
  • 3. 16-1.html setTimeout script function setBomb(){ setTimeout(bomb,3000); } function bomb(){ alert("ドカン!"); document.body.style.backgroundColor = "red"; } setTimeout(関数名,時間)を使うと、時間がたった後に関数を実 行できます。これをタイマーといいます。 ・関数名には()をつけません。 ・時間は、「ミリ秒」(1秒の1000分の1)で設定します。 ver.1.0 3
  • 4. 16-2.html clearInterval script var timer; function setBomb(){ timer = setTimeout(bomb,3000); } function bomb(){ alert("ドカン!"); document.body.style.backgroundColor = "red"; } function clearBomb(){ clearInterval(timer); } setTimeoutの返り値をclearIntervalに渡すと、タイマーがキャン セルされます。 ver.1.0 4
  • 5. 16-3.html setInterval script var timer; function setBomb(){ timer = setInterval(bomb,1000); } function bomb(){ alert("ドカン!"); document.body.style.backgroundColor = "red"; } function clearBomb(){ clearInterval(timer); document.body.style.backgroundColor = "white"; } setTimeoutの代わりにsetIntervalを使うと、指定した関数が繰り 返し実行されます。 ver.1.0 5