研修37日目

16293 ワード
JavaScript 教育 テキストリンク

JavaScriptタイミング


  • SetTimeout(関数、時間)-指定した時間後に関数を実行します.
  • 時間(ミリ秒)、1000ミリ秒=1秒
  • SetInterval(関数、時間)-指定した時間後に関数を実行します.
  • タイミング関数(関数、時間、値1、値2、...)
  • 値1、値2=>>関数として指定するパラメータ
  • cleartimeout(タイムアウトオブジェクト)、clearInterval(タイムアウトオブジェクト)-タスク終了
  • 変数を入れ、関数に入れます.
    • test 18を参照
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var timeout = setTimeout(function() {
	alert("f")
},3000);

setTimeout(test,3000);

function test(){
	console.log("test");
}	

function stopT() {
	clearTimeout(timeout);
}

setInterval(function(t) {
	var d = new Date();
	var now = t + ">"+d.getHours() + ":"+ d.getMinutes()+":"+d.getSeconds();
	
	document.getElementById("a").innerHTML = now + "<br/>";
	document.getElementById("a").innerHTML += t + ">"+ now;
	
},1000, "abc");
</script>
</head>
<body>
<input type="button" value="살고싶으면 3초안에 누르시오." onclick="stopT();"/>
<div id="a"></div>
</body>
</html>
    test 19を参照
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#img1 {
	height: 250px;
}
</style>
<script type="text/javascript
  src=test19.js">
</script>
<script type="text/javascript">
alert("이것이다!!");
</script>
</head>
<body>
<img alt="이미지" src="가위.png" id="img1"/>
<br/>
<input type="button" value="play" onclick="playImg();"/>
<input type="button" value="stop" onclick="stopImg();"/>
</body>
</html>
    test19.js
     * 
 */
var imgs = ["가위.png","바위.png","보.png"];
var now =0;

var interval = null;
var timeout = null;

function playImg(){
	if(interval == null){
		timeout = setTimeout(fade, 2700);
		interval = setInterval(changeImg,3000);
	}
}

function changeImg(){
	now++;
	
	if(now == imgs.length){
		now = 0;
	}
	document.getElementById("img1").src = imgs[now];
	timeout = setTimeout(fade, 2700);
}

function stopImg(){
	clearInterval(interval);
	clearTimeout(timeout);
	interval = null;
}

function fade(){
	//fadeout 0.3s  --> 300 / 20 ==> 15, 1.0 / 20 = 0.05
	for(var i = 1;  i <= 20 ; i++){
		setTimeout(function(t){
			document.getElementById("img1").style.opacity = 1.0 - (0.05 * t)
		}, 15 * i, i);	
	}
	//fadeIn 0.3s
	for(var i = 1;  i <= 20 ; i++){
		setTimeout(function(t){
			document.getElementById("img1").style.opacity = 0.0 + (0.05 * t)
		}, 300 + (15 * i), i);	
	}
}
``
    Int String Byte Ip相互変換
    SOLIDの原則を整理する