2016-02-27 114 views
0

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

回答

2

我更喜欢生成的笑道:

$(function() { 
    function getRandomInt(min, max) { 
     return Math.floor(Math.random() * (max - min + 1) + min); 
    } 

    $('button').on('click', function() { 
     var faces = '', 
      i = 0, 
      random = getRandomInt(1,9); 
     var $firstBlock = $('div.firstBlock').html(''); 
     for(i;i<=random;i++) { 
      faces += '<i class="fa fa-smile-o fa-4x"></i>'; 
     } 
     $firstBlock.append(faces); 
    }); 
}); 

jsFiddle example here

+0

你应该重新评估'的(我;我<= getRandomInt(1,9);我++)'有无尽的循环写在它上面:) – DelightedD0D

+0

感谢b3da,临屋区t就是我在找的东西。 – Lucky500

+0

@ Lucky500你不应该像这样在for循环的条件下调用函数。首先获取值,然后使用值 – DelightedD0D

1

您使用selectorsevent handlers代码连接到DOM就像你与$('.number').click(clickNum);

做已经过会动态路线我自己,因为它更通用恕我直言

这会工作,这里是一个working jsFiddle

$(function() { 
 
    $('.reroll').click(function() { 
 
    addNumToDisplay(getRandomInt(1, 9));  
 
    }); 
 
    $('.number').click(function() { 
 
    addNumToDisplay($(this).text()); 
 
    }); 
 
}); 
 

 
var globalNum; 
 

 
function addNumToDisplay(num) { 
 
    $('.firstBlock .fa-smile-o').remove(); 
 
    for (i = 0; i < num; i++) { 
 
    $('.firstBlock').append('<i class="fa fa-smile-o fa-4x"></i>'); 
 
    } 
 
} 
 

 
function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1) + min); 
 
}
* { 
 
    /*outline: 2px solid red;*/ 
 
} 
 

 
p { 
 
    padding: 50%; 
 
    font-size: 32px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    background: #dbdfe5; 
 
} 
 

 
body { 
 
    padding-top: 60px; 
 
    padding-bottom: 40px; 
 
} 
 

 
.col-sm-8 { 
 
    width: 80%; 
 
    height: 200px; 
 
} 
 

 
.jumbotron { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    height: auto; 
 
} 
 

 
.fa-smile-o { 
 
    background-color: yellow; 
 
    border-radius: 50%; 
 
    height: .9em; 
 
    width: .9em; 
 
} 
 

 
.btn-group { 
 
    position: relative; 
 
    left: 40%; 
 
} 
 

 
.numbers { 
 
    margin-top: 15px; 
 
    width: 900px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<div class="container"> 
 
    <div class="jumbotron firstBlock"> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    <i class="fa fa-smile-o fa-4x"></i> 
 
    </div> 
 
    <div class="btn-group" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-primary restart">Restart</button> 
 
    <button type="button" class="btn btn-warning reroll">Reroll</button> 
 
    <button type="button" class="btn btn-success check">Check</button> 
 
    </div> 
 
    <div class="jumbotron numbers"> 
 
    <button class="number">1</button> 
 
    <button class="number">2</button> 
 
    <button class="number">3</button> 
 
    <button class="number">4</button> 
 
    <button class="number">5</button> 
 
    <button class="number">6</button> 
 
    <button class="number">7</button> 
 
    <button class="number">8</button> 
 
    <button class="number">9</button> 
 
    <span class="right"> 
 
\t \t \t \t <span id="result">5</span> 
 
    <span class="rightButton"> 
 
\t \t \t \t <button id="right">Right!</button> 
 
\t \t \t \t </span> 
 
    </span> 
 
    </div> 
 
</div>