技術標籤：htmljavascript

HTML程式碼

    <section>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
        <p>0</p>
    </section>
    <div>
        <input type=
 
"button" value="開始" onclick="start()">
        <input type="button" value="結束" onclick="end()">
    </div>

JS程式碼

//獲取6個不重複的數字（1-32）
function getBallNum() {
    let set = new Set();
    while (true) {
        //獲取6個不重複的紅球數字（1-32）
        set
 
.add(getNum(1, 32));
        if (set.size == 6) {
            let ballNum = [...set];
            //獲取1個藍球數字（1-16）
            ballNum.push(getNum(1, 16));
            return ballNum;
        }
    }
}

//渲染頁面
function render() {
    let pEles = document.getElementsByTagName("p");
    let ballNum =
 
 getBallNum();
    for (let index in pEles) {
        pEles[index].innerHTML = ballNum[index];
    }

}

let inpEles = document.getElementsByTagName("input")[0];
let timer;
//點選開始呼叫函式
function start() {
    timer = setInterval(render, 100);
    inpEles.disabled = true;
}
//點選結束呼叫函式
function end() {
    clearInterval(timer);
    inpEles.disabled = false;
}

頁面效果，CSS樣式自行設定