달리는 자동차

자바스크립트 open() / close() 본문

JavaScript,JQUERY/JavaScript

자바스크립트 open() / close()

@또또 2020. 8. 18. 17:51
  • open( )메서드 이용해 팝업창 띄우기 / close( )메서드를 이용해 팝업창 닫기
//open()-창띄우기 기본형
open("url", "새 창이름","새 창옵션");

//close()-팝업 창 닫기
close()
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset = "UTF-8">
  <title> window 객체 </title>
  <script>
    window.open("winpopup.html","pop1","width=300, height=400,\left=300,top=50");
  </script>
</head>
<body>
  <h1>팝업띄우기..</h1>
</body>
</html>
<area shape="rect" coords="230,368,280,390" href="#" alt="창 닫기"
		onclick="window.close();

 

일정한 시간 간격으로 코드 실행하기

  • setInterval()
1. var 참조 변수 = setInterval(function() {코드}, 시간 간격(ms));
2. var 참조 변수 = setInterval("코드", 시간 간격(ms));

//예
//setInterval(실행할 function이름, 반복할 시간단위);
//
  • clearInterval()
clearInterval(참조 변수);
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset = "UTF-8">
  <title> window 객체 </title>
  <script>
    var addNum = 0;
    var subNum = 1000;

    var auto_1 = setInterval(function () {
      addNum++;
      console.log("addNum: " + addNum);
    }, 3000);

    var auto_2 = setInterval(function () {
      subNum--;
      console.log("subNum: " + subNum);
    }, 3000);
  </script>
</head>
<body>
  <h1>일정 시간 간격으로 값 증감시키기</h1>
  <p> 콘솔 패널을 열어 확인하세요.</p>
  <button onclick="clearInterval(auto_1)">증가 정지</button>    
  <button onclick="clearInterval(auto_2)">감소 정지</button>    
</body>
</html>

setInterval 함수 -> 특정시간마다 계속 실행되는 함수! ex) 1초마다 계속 실행!

  • setTimeout( ) -> 특정시간 이후 한번만 실행
1. var 참조 변수 - setTimeout(function() {자바스크립트 코드}, 시간 간격(msc));
2. var 참조 변수 = setTimeout("자바스크립트 코드", 시간 간격(msc));
  • clearTimeout()
clearTimeout(참조 변수);

 

 

 

 

 

 

저작자표시

'JavaScript,JQUERY > JavaScript' 카테고리의 다른 글

JavaScript 정리1  (0) 2020.08.22
자바스크립트 함수  (0) 2020.08.18
자바스크립트 객체  (0) 2020.08.18
자바스크립트 제어문  (0) 2020.08.18
자바스크립트 개념,연산자  (0) 2020.08.18
'JavaScript,JQUERY/JavaScript' Related Articles more
Comments