Zero Cho 5強-楽透ゲーム実施

9262 ワード
テキストリンク

💡 学識

setTimeoutを配列中にarrayの値を順次出現させる方法を考え,index値にsetTimeoutの2番目のparameterを乗せればよい.また一つ勉強しました!
それ以外に、pythonのrangeのように、Array(45).fill().map((num, i) => i + 1);このように配列の大きさに応じてundefinedを入れ、mapの2番目のparameterのindexの値に1を加えればよい!
よくできたと思ったが,まだ足りないので謙虚に勉強した.😊

ちくじず



lotto.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lotto</title>
    <link rel="stylesheet" href="lotto.css">
    <script src="lotto.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>로또 공 뽑기</h1>
        <button class="startBtn">시작!</button>
        <div class="balls"></div>
    </div>
</body>
</html>

lotto.css

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.balls {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: 100px;
    border: 2px solid gray;
}


.ball {
    width: 50px; 
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    /* text-align: center; */
    margin: 15px;
    border: transparent;
    border-radius: 50px;
}

.container {
    margin-top: 100px;
    width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    border: 1px solid black;
}

.startBtn {
    width: 100px;
    margin-bottom: 30px;
}

lotto.js

const balls = document.querySelector('.balls');
const startBtn = document.querySelector('.startBtn');


let numArr;
let WinningNumArr = new Array();
let timer;

function initialize() {
    balls.innerHTML = '';
    WinningNumArr = [];
    numArr = Array(45).fill().map((num, i) => i + 1);
}

function start() {
    for (let i = 0; i < 7; i++) {
        pushBall()
    }
    showBall();
}

function pushBall() {
    const num = Math.floor(Math.random() * numArr.length);
    WinningNumArr.push(numArr[num]);
    numArr.splice(num,1);
}

function showBall() {
    for (let num=0; num < 7; num++) {
        setTimeout(() => {
            const ball = document.createElement('div');
            ball.classList.add('ball')
            ball.innerText += WinningNumArr[num];
            ball.style.backgroundColor = matchColor(ball, num);
            balls.appendChild(ball);
        }, 1000 * num);
    }
}

function matchColor(ball, order) {
    if (order === 6) return 'red';
    const num = ball.innerText;
    if (num > 36) return 'purple';
    else if (num > 27) return 'orange';
    else if (num > 18) return 'skyblue';
    else if (num > 9) return 'pink';
    else return 'yellowgreen';
}

startBtn.addEventListener('click', () => {
    if (balls.childNodes.length && balls.childNodes.length !== 7) {
        alert("실행 중입니다. 종료할 수 없습니다.")
        return
    }
    initialize();
    start();
})
Android Soap通信(Java)
BOJ:10808文字数(C++)