setInterval 활용한 랜덤숫자 css
$span.css("color", "#"+(parseInt(Math.random()*0xffffff)).toString(16) );
위 표현이 재미있다.
color를 랜덤함수를 통해서 임의로 부여할 수 있음
window.scrollTo(0, document.body.scrollHeight);
또한, 위표현도 재미있다.
window화면이 0부터 scroll되었을때의 마지막화면으로 이동시켜줌.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>랜덤숫자출력(칼라)</title>
<style>
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script>
var num;
var $panel;
var $span;
$(document).ready(function(){
$panel = $("#panel");
setInterval( onCount, 10);
});
// onCount라는 함수 랜덤의 숫자 num 10부터 99까지를 span에 담음.
// css1: font-size 10~49부여해서 출력
// css2: color를 임의로 부여
function onCount(){
// 0부터 99까지 랜덤 정수 부여
num = parseInt( Math.random() * 90 ) + 10;
$span = $("<span></span>");
$span.html(num);
// css1: font-size 10~49부여해서 출력
$span.css("font-size", parseInt(Math.random() * 40) + 10 );
// css2: color를 임의로 부여
$span.css("color", "#"+(parseInt(Math.random()*0xffffff)).toString(16) );
// css3: display로 inline-block 부여
$span.css("display","inline-block");
$span.appendTo($panel);
// window화면이 0부터 scroll되었을때의 마지막화면으로 이동시켜줌.
window.scrollTo(0, document.body.scrollHeight);
}
</script>
</head>
<body>
<div>
<div id="panel">
</div>
</div>
</body>
</html>
clearInterval - setInterval 멈추기
clearInterval()는 정의내린 setInterval()를 멈출수 있음.
여기서 재미있는 부분
setInterval를 변수에 담아두면, 향후에, interval를 멈추는 clearInterval()함수를 사용할 수 있음
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>추첨기</title>
<style>
body{
font-size:9pt;
}
#panel{
border:1px #000000 solid;
line-height:400px;
font-size:100px;
width:400px;
height:400px;
text-align:center;
vertical-align:middle;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
var $panel; // 출력화면 변수
var num; // 결과 숫자 변수
var totalMem; // 참가인원 변수
var mySetInterval; // setInterval 함수를 넣을 변수
$(document).ready(function(){
$panel = $("#panel");
// bind 함수를 통해서 click 이벤트에 onStart 함수를 묶음.
$("#btn_Start").bind("click", onStart );
// bind 함수를 통해서 click 이벤트에 onStop 함수를 묶음.
$("#btn_Stop").bind("click", onStop );
});
function onStart(){
// setInterval를 변수에 담아두면, 향후에, interval를 멈추는 clearInterval()함수를 사용할 수 있음
mySetInterval = setInterval( onCountNum , 20);
}
function onCountNum(){
totalMem = $("#totalWrap").val();
num = parseInt( Math.random() * totalMem ) + 1;
$panel.css("font-size", parseInt( Math.random() * 300 ) + 100);
$panel.css("color", "black");
$panel.html(num);
}
function onStop(){
// clearInterval()함수 사용법: clearInterval( 멈추고싶은 setInverval를 담은 변수 );
clearInterval(mySetInterval);
$panel.css({"font-size":300, "color":"red"});
}
</script>
</head>
<body>
<div>
<div id="panel" >
</div>
<div id="nav">
참여인원 : <input type="text" id="totalWrap" value="10"></input>
<button id="btn_Start">시작</button>
<button id="btn_Stop">멈춤</button>
</div>
</div>
</body>
</html>
상태변수
특정이벤트 진행유무에 대해서 확인하기 위해, 특정 임의변수를 만들어서, 특정값을 집어넣음.
그 값에 따라서, if문으로 이벤트 제어
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>추첨기</title>
<style>
body{
font-size:9pt;
}
#panel{
border:1px #000000 solid;
line-height:400px;
font-size:100px;
width:400px;
height:400px;
text-align:center;
vertical-align:middle;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
var $panel;
var num;
var totalMem;
var mySetInterval;
var isPlay = false;
$(document).ready(function(){
$panel = $("#panel");
$("#btn_Start").bind("click", onStart);
$("#btn_Stop").bind("click", onStop);
});
function onStart(){
if(isPlay == false){
mySetInterval = setInterval( onCount , 20);
$("#totalWrap").attr("disabled", "disabled");
isPlay = true;
}
}
function onStop(){
if(isPlay == true){
clearInterval( mySetInterval );
$panel.css({"font-size": 300, "color":"purple"});
$("#totalWrap").removeAttr("disabled");
isPlay = false;
}
}
function onCount(){
totalMem = $("#totalWrap").val();
num = parseInt( Math.random() * totalMem ) + 1;
$panel.css({"font-size": parseInt( Math.random() * 200 ) +100});
$panel.html(num);
}
</script>
</head>
<body>
<div>
<div id="panel" >
</div>
<div id="nav">
참여인원 : <input type="text" id="totalWrap" value="10"></input>
<button id="btn_Start">시작</button>
<button id="btn_Stop">멈춤</button>
</div>
</div>
</body>
</html>
화면위치좌표
