我有一個快速問題,我在我的代碼中有一個隨機函數,我希望隨機函數隨機化9個數字,並根據返回的數字顯示數字快樂的面孔在我的HTML。使用JavaScript顯示隨機元素數
我的第一個問題是如何連接功能與我的快樂的面孔,第二個是,我應該有我的html所有九個快樂的面孔,或者我應該只有一個,並生成其他(取決於動態的。現在我有一個顯示:在CSS上沒有,我只是註釋掉,所以你們可以看到它。
我添加一些代碼在這裏
'use strict';
$(document).ready(init);
var globalNum;
function init(){
\t $('.number').click(clickNum);
\t console.log('hello from jQuery!');
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getRandomInt(1,9));
function clickNum(){
\t var num = $(this).text();
\t console.log(num)
\t // addNumToDisplay(num);
}
// function displayNum(num){
// \t globalNum =
// \t var currentNumber = $('.number').text(num);
// \t console.log(currentNumber);
// }
* {
\t /*outline: 2px solid red;*/
}
p {
\t padding: 50%;
\t font-size: 32px;
\t font-weight: bold;
\t text-align: center;
\t background: #dbdfe5;
}
body {
\t padding-top: 60px;
\t padding-bottom: 40px;
}
.col-sm-8 {
\t width: 80%;
\t height: 200px;
}
.jumbotron {
\t width: 800px;
\t margin: 0 auto;
\t height: auto;
}
.fa-smile-o {
\t background-color: yellow;
\t border-radius: 50%;
\t height: .9em;
width: .9em;
/*display: none;*/
}
.btn-group {
\t position: relative;
\t left: 40%;
}
.numbers {
\t margin-top: 15px;
\t width: 900px;
}
.number {
\t font-size: 40px;
\t letter-spacing: 10px;
}
#right {
\t position: relative;
\t height: 80px;
\t width: 120px;
\t font-size: 30px;
\t background-color: lime;
\t color: white;
}
.rightButton {
\t margin-left: 50px;
\t position: absolute;
}
#result {
\t font-size: 30px;
\t margin-left: 40px;
\t padding: 30px;
\t background-color: white;
\t border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Game 5</title>
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
\t <link rel="stylesheet" href="style.css">
</head>
<body>
\t <div class="container">
\t \t <div class="jumbotron firstBlock">
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t \t <i class="fa fa-smile-o fa-4x"></i>
\t \t </div>
\t \t <div class="btn-group" role="group" aria-label="...">
\t \t <button type="button" class="btn btn-primary">Restart</button>
\t \t <button type="button" class="btn btn-warning">Reroll</button>
\t \t <button type="button" class="btn btn-success">Check</button>
\t \t </div>
\t \t <div class="jumbotron numbers">
\t \t \t <button class="number">1</button>
\t \t \t <button class="number">2</button>
\t \t \t <button class="number">3</button>
\t \t \t <button class="number">4</button>
\t \t \t <button class="number">5</button>
\t \t \t <button class="number">6</button>
\t \t \t <button class="number">7</button>
\t \t \t <button class="number">8</button>
\t \t \t <button class="number">9</button>
\t \t \t <span class="right">
\t \t \t \t <span id="result">5</span>
\t \t \t \t <span class="rightButton">
\t \t \t \t <button id="right">Right!</button>
\t \t \t \t </span>
\t \t \t </span>
\t \t </div>
\t </div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> \t
<script src="main.js"></script> \t
</body>
</html>
你應該重新評估'的(我;我<= getRandomInt(1,9);我++)'有無盡的循環寫在它上面:) – DelightedD0D
感謝b3da,臨屋區t就是我在找的東西。 – Lucky500
@ Lucky500你不應該像這樣在for循環的條件下調用函數。首先獲取值,然後使用值 – DelightedD0D