使用JavaScript显示随机数量的元素

时间：2016-02-27 07:24:18

标签： javascript jquery random

我有一个简单的问题，我的代码中有一个随机函数，我希望随机函数随机化9个数字，并根据返回的数字，这将显示我的html上的幸福面孔的数量。

我的第一个问题是如何将这个功能与我快乐的面孔连接，第二个问题是，我应该在我的html上拥有所有九个快乐面孔，还是应该只有一个，并生成其他面孔（取决于随机数字）动态。现在我有一个显示：没有关于CSS，我只是注释掉了所以你们可以看到它。

我在这里添加了一些代码

'use strict';

$(document).ready(init);

var globalNum;

function init(){
	$('.number').click(clickNum);
	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(){
	var num = $(this).text();
	console.log(num)
	// addNumToDisplay(num);

}

// function displayNum(num){
// 	globalNum = 
// 	var currentNumber = $('.number').text(num);
// 	console.log(currentNumber);
// }
* {
	/*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;
    /*display: none;*/
}

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

.numbers {
	margin-top: 15px;
	width: 900px;
}

.number {
	font-size: 40px;
	letter-spacing: 10px;
}

#right {
	position: relative;
	height: 80px;
	width: 120px;
	font-size: 30px;
	background-color: lime;
	color: white;
}

.rightButton {
	margin-left: 50px;
	position: absolute;
}

#result {
	font-size: 30px;
	margin-left: 40px;
	padding: 30px;
	background-color: white;
	border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Game 5</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<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">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<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</button>
		  <button type="button" class="btn btn-warning">Reroll</button>
		  <button type="button" class="btn btn-success">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">
				<span id="result">5</span>
				<span class="rightButton">
				<button id="right">Right!</button>
				</span>
			</span>
		</div>
	</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>	
<script src="main.js"></script>	
</body>
</html>

2 个答案:

答案 0 :(得分：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

答案 1 :(得分：1)

您使用selectors和event 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">
				<span id="result">5</span>
    <span class="rightButton">
				<button id="right">Right!</button>
				</span>
    </span>
  </div>
</div>

相关问题
最新问题