글

라벨이 clearInterval인 게시물 표시

Moving Fish in javascript / 자바스크립트로 물고기 움직이기

이미지
<body> <div id=panel> <div id="bar"></div> <img src="fish.png" id="fish"> </div> <br> <div id="nav"> <button id="leftBtn" onClick="startMove('leftBtn')">Move to Left</button> <button id="rightBtn" onClick="startMove('rightBtn')">Move to Right</button> <button id="stop" onClick="stop()">Stop</button> </div>  </body> <style> #panel{position:relative; width:600px; height:300px; border:1px solid #ccc; } #bar{position:absolute; left:0px; top:190px; width:100%; height:20px; background:pink;} #btnStart{margin:0 auto;} #fish{position:absolute; left:0px; top:120px; width:120px; height:70px;} #nav{text-align: center; width:600px;} </style> <script> var panel=null; var fish; var timer; window.onload=functi...

Math.random/ setInterval/ clearInterval in javascript // 자바스크립트 Math.random/ setInterval/ clearInterval 이해하기

<script> var nCount=0; var panel=null; window.onload=function(){ this.init(); } function init(){ this.panel=document.getElementById("panel"); } var t; function start(){ t = setInterval(this.addTag,20); //0.02초에 한번씩 addtag 출력 } function addTag(){ this.nCount++; var span=document.createElement("span"); span.style.color="#"+(parseInt(Math.random()*0xffffff)).toString(16); span.style.fontSize=(10+parseInt(Math.random()*40))+"px"; span.style.display="inline-block"; span.innerHTML=this.nCount; this.panel.appendChild(span); console.log(nCount); } function stopButton(){ clearInterval(t); } </script> </head> <body> <div> <button onClick="start()">start</button> <button onClick="stopButton()">stop</button> <div id="panel"></div> </div> </body> </html>