상세 컨텐츠

본문 제목

로또 번호 추첨기

지식·동향/애플리케이션 만들기

by 그뤠잇팔공케이 2023. 9. 28. 22:52

본문

반응형
SMALL

원시적인 로또번호 추첨기 html,javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 추첨기</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        #lotto-card {
            width: 450px;
            padding: 20px;
            text-align: center;
            border: 2px solid #333;
            border-radius: 10px;
            background-color: #f0f0f0;
        }
        #lotto-numbers {
            font-size: 24px;
            font-weight: bold;
        }
        #draw-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #0074d9;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
        #results {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="lotto-card">
        <p id="lotto-numbers"></p>
        <button id="draw-button">로또 번호 추첨</button>
        <div id="results"></div>
    </div>
    <script>
var i=1;
        function getRandomNumbers() {
            let numbers = [];
            while (numbers.length < 6) {
                let randomNumber = Math.floor(Math.random() * 45) + 1;
                if (!numbers.includes(randomNumber)) {
                    numbers.push(randomNumber);
                }
            }
            return numbers;
        }

        function displayLottoNumbers() {

            const lottoNumbers = getRandomNumbers();
            const lottoNumbersElement = document.getElementById('lotto-numbers');
            lottoNumbersElement.textContent = `로또 번호: ${lottoNumbers.join(', ')}`;

            // 결과를 아래에 추가
            const resultsElement = document.getElementById('results');
            resultsElement.innerHTML += i+`: ${lottoNumbers.join(', ')}</p>`;
i++;
        }

        const drawButton = document.getElementById('draw-button');
        drawButton.addEventListener('click', displayLottoNumbers);
    </script>
</body>
</html>

반응형
LIST

'지식·동향 > 애플리케이션 만들기' 카테고리의 다른 글

java tetris game  (0) 2023.09.30
재미있는 구글뮤직랩  (0) 2023.09.28
갑자기 제비뽑기를 해야할때..  (0) 2023.09.28
웹 스톱워치  (0) 2023.09.18
이름으로 궁합보기  (0) 2023.09.18

관련글 더보기