본문 바로가기

카테고리 없음

JS Window 객체 (팝업, 타이머,window창 수정 팝업)

버튼 클릭 다른 html 페이지 팝업

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window객체</title>
</head>
<body>
    <script>
    var newWin;
    function newOpen() {
        window.open('객체.html','', 'width = 600, height = 300');
    }
    </script>
    <button onclick="newOpen()">새 window 열기</button>
</body>
</html>

window 닫기 버튼 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window객체</title>
</head>
<body>
    <script>
    var newWin;
    function winOpen() {
        newWin = window.open('객체.html','', 'width = 600, height = 300');           //newWin : 해당 타겟의 인스턴스
    }
    function winClose() {
        newWin.close();
        //window.close();
    }
    </script>
    <button onclick="winOpen()">새 window 열기</button>
    <button onclick="winClose()">새 window 닫기</button>
</body>
</html>

 

 

 

 

 

타이머 , 폭탄설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>타이머</title>
</head>
<body>
    <script>
        var timeid;
        function timeStart() {
            alert('5초 후에 폭탄이 폭팔합니다.');
            timeid = window.setTimeout(function () {
                alert("꽝~~~~~!");
            },5000);
        }
        function timeStop() {
            window.clearTimeout(timeid);
            alert("폭탄이 임시 제거되었습니다.");
        }
    </script>
    <button onclick="timeStart()">시한 폭탄 설정</button>
    <button onclick="timeStop()">시한 폭탄 해제</button>
</body>
</html>

 

주기적인 타이머

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>타이머</title>
</head>
<body>

    <!--주기적인 타이머-->
    <script>
        var timeid;
        var count = 0;
        function timeStart() {
            timeid = window.setInterval(function() {
                document.getElementById("result").innerText = count++;
            },1)
        }
        function timeStop() {
            window.clearInterval(timeid);
        }
    </script>
    <button onclick="timeStart()">카운트 시작</button>
    <button onclick="timeStop()">카운트 중지</button>

    <h1><div id="result"></div></h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>타이머</title>
</head>
<body onload="myload()" onresize="myfocus()">
    <script>
        function myload() {
            alert("문서를 로드하는 중입니다.");
        }
        function myfocus() {
            alert("포커스를 잃었습니다.")
        }
    </script>
</body>
</html>

전체창 로딩 페이지
축소 페이지