1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    #div2 {
        border: 1px solid gray;
        width: 100px;
        height: 20px;
        background-color: yellow;
    }
</style>
<script type="text/javascript">
 
    var w = 100;//width: 100px;에 대응하는 전역변수
    
    function test() {
        
        //타이머,Timer
        //1. 특정 시간이 지난 뒤 업무 실행
        //2. 특정 시간마다 업무 실행
        
        //setTimeout("자바 스크립트 코드", 실행시간);
        //setTimeout("alert('하하하');", 3000);
        
        //setTimeout(함수, 실행시간) //권장
        //setTimeout(test2, 3000);
        
        setTimeout(function() {
            //alert("꼬끼오~");
            document.getElementById("btn1").style.display = "none";
        }, 3000);
        
    }
    
    function test2() {
        alert("따르릉~");
    }
    
    
    function test3() {
        setInterval(function() {
            document.getElementById("div1").innerText = new Date().toLocaleString(); //시계
            
            document.getElementById("div2").style.width = w + "px";
            w += 5; //5씩 증가
            
        }, 1000)
    }
    
 
</script>
 
 
</head>
<body>
 
 
    <!-- ex17.htm -->
 
 
    
    <input type="button" id="btn1" value="테스트" onclick="test3();" />
    <div id="div1"></div>
    <div id="div2"></div>
 
</body>
</html>
cs


'WEB > JS' 카테고리의 다른 글

회원정보 입력하기  (0) 2016.01.22
js test  (0) 2016.01.22
버튼 찾아 css 제거하기  (0) 2016.01.22
마우스 이벤트 / 키보드 이벤트  (0) 2016.01.22
태그 조작  (0) 2016.01.22

+ Recent posts

티스토리툴바