명품 웹 프로그래밍 8장 과제

웹프로그래밍 2019. 5. 14. 18:49

오픈챌린지 8

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>갬블링 게임</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        #divStyle {
            border: 1px solid violet;
            background-color: ivory;
            font-size: 80px;
            color: blue;
            width: 210px;
            font-style: italic;
        }
        #resultId {
            color: violet;
            font-size: 30px;
            font-style: italic;
        }
    </style>
</head>
<body>
<h3>갬블링 게임</h3>  
<hr>
<p>각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.</p>
<div id="divStyle">
    <span id="numRand" onclick="rand()">0</span>
    <span id="numRand1" onclick="rand1()">0</span>
    <span id="numRand2" onclick="rand2()">0</span>
</div>
<div id="resultId" onclick="restart()"></div>
<script>
    var sw=0;
    var sw1=0;
    var sw2=0;
    var numArray=new Array();
    function rand() {
        if(sw!=1) {
            var span = document.getElementById("numRand");
            var num = Math.random() * 3;
            var num2 = Math.floor(num);
            span.innerHTML = num2;
            numArray[0]=num2;
            sw = 1;
        }
    }
    function rand1() {
        if (sw1 != 1) {
            var span = document.getElementById("numRand1");
            var num = Math.random() * 3;
            var num2 = Math.floor(num);
            span.innerHTML = num2;
            numArray[1] = num2;
            sw1 = 1;
        }
    }
    function rand2() {
        if (sw2 != 1) {
            var span = document.getElementById("numRand2");
            var num = Math.random() * 3;
            var num2 = Math.floor(num);
            span.innerHTML = num2;
            numArray[2] = num2;
            sw2 = 1;
            var resultNum = numArray[0];
            var resultSw = 1;
            for (var i = 1; i < 3; ++i) {
                if (numArray[i] != resultNum) {
                    resultSw = 0;
                    break;
                }
            }
            var result = document.getElementById("resultId");
            if (resultSw == 0) {
                result.innerHTML = "fail(click here to do again)";
            }
            else {
                result.innerHTML = "Success(click here to do again)";
            }
        }
    }
    function restart() {
        location.reload();
    }
</script>
</body>
</html>

8-4예제변경

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <script>
        function change(obj, size, color) {
            if(obj.tagName=="BUTTON"){
                if (obj.sw == 1) {
                    obj.style.color = "black";
                    obj.style.fontSize = "13.3333px";
                    obj.sw = 0;
                }
                else {
                    obj.style.color = color;
                    obj.style.fontSize = size;
                    obj.sw = 1;
                }
            }
            else if(obj.tagName=="DIV") {
                if (obj.sw == 1) {
                    obj.style.color = "black";
                    obj.style.fontSize = "1em";
                    obj.sw = 0;
                }
                else {
                    obj.style.color = color;
                    obj.style.fontSize = size;
                    obj.sw = 1;
                }
            }
            
        }
</script>
</head>
<body>
<h3>this 활용</h3>
<hr>
<button onclick="change(this, '30px', 'red')">버튼</button>
<button onclick="change(this, '30px', 'blue')">버튼</button>
<div onclick="change(this, '25px', 'orange')">
    여기 클릭하면 크기와 색 변경
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>visibility로 텍스트 숨기기</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        span {
            visibility: hidden;
            color: blue;
        }
    </style>
    <script>
        function change() {
            var spanArray=document.getElementsByTagName("span");
            for(var i=0 ; i<spanArray.length ; ++i) {
                var span=spanArray[i];
                var style=window.getComputedStyle(span);
                var value=style.getPropertyValue("visibility");
                if(value == "hidden") {
                    span.style.visibility = "visible";
                }
                else {
                span.style.visibility="hidden";
                }
            }
        }
    </script>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?
    <button onclick="change()">show/hide</button>
</h3>
<hr>
<ul>
    <li>I (<span>love</span>) you.</li>
    <li>CSS is Cascading (<span>Style</span>) Sheet.</li>
    <li>응답하라 (<span>1988</span>).</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>z-index 프로퍼티</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        div {
            position: absolute;
        }
        img {
            position: absolute;
        }
    </style>
</head>
<body>
<h3>z-index 프로퍼티</h3>
<hr>
<div>
    <img id="spadeA" src="media/spade-A.png" width="100" height="140" alt="스페이드A">
    <img id="spade2" src="media/spade-2.png" width="100" height="140" alt="스페이드2">
    <img id="spade3" src="media/spade-3.png" width="100" height="140" alt="스페이드3">
    <img id="spade7" src="media/spade-7.png" width="100" height="140" alt="스페이드7">
</div>
<script>
    var imgArray = document.getElementsByTagName("img");
    for (i = 0; i < imgArray.length; ++i) {
        var img = imgArray[i];
        img.style.zIndex = i;
        img.style.left = "10px";
        img.style.top = "20px";
        img.onclick = shuffle;
    } 
    function shuffle() {
        for (i = 0; i < imgArray.length; ++i) {
            var img = imgArray[i];
            img.style.zIndex++;
            img.style.zIndex %= imgArray.length;
        }
    }
</script>
</body>
</html>

10-2.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DOM 객체 동적 삽입</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <script>
        function addAnswer(obj,text) {
            if(obj.sw!=1) {
                var p = document.createElement("p");
                p.innerHTML = text;
                obj.parentElement.appendChild(p);
                obj.sw=1;
            }
            p.onclick=function () {
                this.parentElement.removeChild(this);
                obj.sw=0;
            }
                
        }
    </script>
</head>
<body>
<h3>정답의 동적 삽입</h3>
<hr>
<div>
    <p>Q. 거울아 거울아 세상에서 누가 제일 예쁘니?</p>
    <button onclick="addAnswer(this,'백설공주')">답보기</button>
</div>
<div>
    <p>Q. 죽느냐 사느냐 어떤 것이 문제인가?</p>
    <button onclick="addAnswer(this,'둘다')">답보기</button>
</div>
</body>
</html>

'웹프로그래밍' 카테고리의 다른 글

명품 웹 프로그래밍 홈페이지 만들기 (10)	2019.05.14
명품 웹 프로그래밍 9장 과제 (1)	2019.05.14
명품 웹 프로그래밍 7장 과제 (0)	2019.05.14
명품 웹 프로그래밍 6장 과제 (0)	2019.05.14
명품 웹 프로그래밍 5장 과제 (0)	2019.05.14

ABOUT ME

건호의 코딩공부

'웹프로그래밍' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'웹프로그래밍' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바