Javascript/setTimeout()

sample1

0

sample1code
var count = 0;
window.onload = function s1Func(){
  document.getElementById("s1p").innerHTML = count++;
  var auto = setTimeout(function(){
	s1Func()
  },1000);
  if(count>5){
	clearTimeout(auto);
  }
}
sample2
sample2code
var count2 = 0;
var img = new Array();
img[0] = new Image();
img[0].src = "../../img/m4.jpg";
img[1] = new Image();
img[1].src = "../../img/m5.jpg";
img[2] = new Image();
img[2].src=  "../../img/jura.jpg";
var s2Func = function(){
  document.getElementById("s2Img").src=img[count2].src;
  count2++;
  if(count2===3){
  	count2=0;
  }
  setTimeout(s2Func, 2000);  
}
s2Func();
	
sample3
sample3code
var s3Div = document.getElementById("s3Div");
var s3Btn01 = document.getElementById("s3Btn01");
var s3Btn02 = document.getElementById("s3Btn02");
var s3Num = 0;
s3Div.innerText = s3Num;
var s3Plus;
var s3Minus;
function s3Func01(){
  s3Num++;
  s3Div.innerText = s3Num;
  s3Plus = setTimeout(function(){
  	s3Func01()
  }, 20);
}
function s3Func02(){
  s3Num--;
  s3Div.innerText = s3Num;
  s3Minus = setTimeout(function(){
  	s3Func02()
  }, 20);
}
s3Btn01.addEventListener("mousedown", s3Func01);
s3Btn01.addEventListener("mouseup", function(){
  clearTimeout(s3Plus);
});
s3Btn02.addEventListener("mousedown", s3Func02);
s3Btn02.addEventListener("mouseup", function(){
  clearTimeout(s3Minus);
});
	
sample4
s4Div
sample4code
function s4Func(){
  var r = Math.floor(Math.random()*256);
  var g = Math.floor(Math.random()*256);
  var b = Math.floor(Math.random()*256);
  var rgb = "rgb(" + r + "," + g + "," + b + ")";
  var s4Div = document.getElementById("s4Div");
  s4Div.style.color = rgb;
  setTimeout(function(){
  	s4Func()
  }, 1000);
}
	
smaple5
%
sample5code
var sSpan = document.getElementById("sSpan");
var s5Div01 = document.getElementById("s5Div01");
s5Div01.style.width = "50%";
var s5Div02 = document.getElementById("s5Div02");
s5Div02.style.background = "navy";
s5Div02.style.color = "white";
var sWidth = 10;
$(s5Div02).width(sWidth + "%");
sSpan.innerText = sWidth;
function s5Func(){
  sWidth++;
  $(s5Div02).width(sWidth + "%");
  sSpan.innerText = sWidth;
  var st = setTimeout("s5Func()", 10);
  if(sWidth >= 100){
  	clearTimeout(st);
  }
}
	
sample6
rotateX
rotateY
sample6code
var deg = 0;
function s6Func(){
  var x = document.getElementById("rotateX");
  var y = document.getElementById("rotateY");
  deg += 6;
  if(deg == 360){
	deg = 0;
  }
  if((0 <= deg && deg <90) || (270 <= deg && deg < 360)){
	x.className = "black";
	y.style.color = "#222";
  } else {
	x.className = "gray";
	y.style.color = "#bbb";
  }
  x.style.transform = "rotateX(" + deg + "deg)";
  y.style.transform = "rotateY(" + deg + "deg)";
  setTimeout(function(){
	s6Func()
  },50);
}
	
sample7
sample7code
const s7Text = document.getElementById("s7Text");
var s7Time;
s7Text.addEventListener("keydown", function(){
  s7Text.setAttribute("type", "text");
  clearTimeout(s7Time);
});
s7Text.addEventListener("keyup", function(){
  s7Time = setTimeout(function(){
  	s7Text.setAttribute("type", "password")
  }, 3000);
});
	
sample8
:
sample8code
time = 180;
function s8Func(){
  var s8Min = document.getElementById("s8Min");
  var s8Sec = document.getElementById("s8Sec");
  min = parseInt(time / 60);
  sec = parseInt(time % 60);
  s8Min.innerHTML = min;
  if(sec < 10){
  	s8Sec.innerHTML = "0" + sec;
  } else {
  	s8Sec.innerHTML = sec;
  }
  time -= 1;
  var cd = setTimeout(function(){
  	s8Func()
  }, 1000);
  if(time < 0){
  	clearTimeout(cd);
  }
}
s8Func();