---
# System prepended metadata

title: jQuery應用 - 亂數產生器 (2)
tags: [前端程式設計, 108-1]

---

# jQuery應用 - 亂數產生器 (2)

## random2.html
```htmlmixed=
<!doctype html>
<html lang="zh-TW">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- 套用教學模版 CSS -->
    <link rel="stylesheet" href="./css/template.css">


    <title>亂數產生器</title>
</head>

<body>

    <div class="container">

        <!-- 標題 -->
        <div class="row">
            <div class="col">
                <div class="jumbotron">
                    <h1 class="display-4">亂數產生器</h1>
                </div>
            </div>
        </div>

        <!-- 表單 -->
        <div class="row">
            <div class="col">
                <form>
                    <div class="form-group row">
                        <label for="inputNumber" class="col-sm-2 col-form-label">要產生多少個1到49的亂數</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inputNumber" placeholder="請輸入要產生多少個亂數"
                                value="1">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button id="main" type="button" class="btn btn-primary">產生</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 產生 button 的區塊-->
        <div class="row" id="data">
            <div class="col">
            </div>
        </div>

        <div class="row">
            <div class="col">
                <footer>
                    copyright &copy; 2020 前端程式設計 by kChen
                </footer>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
    </script>

    <!-- 引用自己寫的數學函式庫 -->
    <script src="./js/math.js"></script>
    <!-- 引用自己寫的 js -->
    <script src="./js/random2.js"></script>
</body>

</html>
```
## random2.css
```css=
div.new-btn {
    background-color: #b3d7ff;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    text-align: center;
    padding-top: 13px;
    box-shadow: inset -4px -4px 6px #6db0fb;
    display: inline-block;
}

#data {
    margin-bottom: 50px;
    margin-top: 38px;
}

```

## random2.js
```javascript=
// 當HTML文件載入完成時執行
$(() => {
    // 這裡就是程式的開始
    console.log('JS 正常執行')

    // 當 id=main 的 html element 被按到的時候執行
    $('#main').on('click', () => {
        console.log('按到了喔 ' + rand(1, 49))

        $('#data>div.col').empty()

        var n = $('#inputNumber').val()

        for (i = 1; i <= n; i++) {
            let r = rand(1, 49)
            var $div = $('<div>').attr('class', 'new-btn').text(r)
            $('#data>div.col').append($div)
        }
    })
})
```

## math.js
```javascript=
var rand = (start, end) => {
    var r
    n = end - start + 1 //求亂數的範圍 
    r = Math.random() * n // 放大
    r = Math.floor(r) // 去除小數點
    r += start // 位移
    return r
}
```

###### tags: `前端程式設計` `108-1`