세로형
Notice
Recent Posts
Recent Comments
Link
11-22 00:00
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 구구단 출력해보기 본문

javascript

자바스크립트 구구단 출력해보기

이수진의 블로그 2017. 8. 22. 08:53
반응형
728x170
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div#area{
            font-size: 30px;
        }
    </style>
</head>
<body>
   시작단: <input type="text" id="start"> <br>
   종료단: <input type="text" id="end"><br>
   <input type="button" id="sBtn" value="실행">
   <hr>
   <div id="area">구구단 출력
       
   </div>
 
</body>
</html>
 
 
<script>
    var area = document.getElementById("area");
    //아이디가 area인 DOM(document object model, 문서 객체 모델) 생성(참조)
    var gugudan = "";
 
    var btn = document.getElementById("sBtn");
    btn.onclick = function(){
            
        var start = Number(document.getElementById("start").value);
        var end = Number(document.getElementById("end").value);
        if(start > end){   //시작값이 끝 값보다 크면 값을 바꿔줌
            var tmp = start;
            start = end;
            end = tmp;
        }
        for(var i = start ; i <= end ; i++){
            for(var j = 1 ; j <= 9 ; j++){
                gugudan += i+"*"+j+"= "+(i*j)+"<br>";
            }
 
        }
        area.innerHTML = gugudan;
    }
    
</script>
Colored by Color Scripter
cs


반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 날짜, 유닉스  (0) 2017.08.22
자바스크립트 이미지 슬라이드(javascript image slide)  (0) 2017.08.22
자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경  (0) 2017.08.21
자바스크립트 마우스 오버시 이미지 변경(javascript onmouseover)  (0) 2017.08.21
자바스크립트로 간단한 퍼즐게임 만들기  (5) 2017.08.21
공유하기 링크
'javascript' Related Articles more
Comments