我有一个快速问题,我在我的代码中有一个随机函数,我希望随机函数随机化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