random

2024년 08월 20일

chantleman
작성자
2024.08.20.:03

<random.js>

    let rnd = (min, max)=>{
        return Math.floor(Math.random()*(max-min+1)+min);
    };

js 파일에서 최솟값, 최댓값을 파라미터로 받는 함수 만든 후

html에서 활용하기

	<script src="../js/random.js"></script>

<Math_guess.html>

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                border: 2px double royalblue;
                padding: 20px;
            }
        </style>
    </head>

    <body>
        <h4>숫자 맞추기 [1~100]</h4>
        <input type="text" size="3">
        <button>맞추기</button>

        <div></div>
        <script src="../js/random.js"></script>
        <script>
            const RND = rnd(1, 100);
            let str = []; //입력된 값을 저장할 변수
            let cnt = 0; //입력된 횟수를 저장할 변수

            document.querySelector('button').addEventListener('click', function () {

                let v_div = document.querySelector('div');
                let input = document.querySelector('input').value;

                console.log(isNaN(input));
                if (isNaN(input)) alert("숫자 입력하세요");
                else {
                    str.push(input);
                    cnt++;

                    if (input == RND) {
                        v_div.innerHTML = "정답입니다~ <br>";
                        v_div.innerText += str + "(입력된 횟수: " + cnt + ")";
                    } else if (input > RND) {
                        v_div.innerText = "힌트: 더 작은 값 입력하세요(" + cnt + ")";
                    }
                    else {
                        v_div.innerText = "힌트: 더 큰 값 입력하세요(" + cnt + ")";
                    }
                }
            });
        </script>
    </body>

    </html>

728x90

'js' 카테고리의 다른 글

BOM, DOM (0)	2024.08.21
window.onload를 활용한 lotto예제 (0)	2024.08.21
rest parameter (0)	2024.08.12
var, let, const (0)	2024.08.08
레이아웃 (0)	2024.08.06

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바