# 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`