我怎麼能隨意在JavaScript設置

我試圖讓smile.png圖像出現在特定<div>內的隨機位置的圖像的位置。我怎麼能隨意在JavaScript設置

我所做的是設置variable.style.top= top_position+'px' & variable.style.left = left_position+"px"。

然而，我所得到到目前爲止是水平排列，而不是隨機定位的圖像。我怎麼能做到這一點？

var theLeftSide = document.getElementById("leftSide"); 
 
var randomY = Math.round(Math.random()) + 'px'; 
 
var randomX = Math.round(Math.random()) + 'px'; 
 

 
function generateFaces() { 
 
    for (numberOfFaces = 0; numberOfFaces < 5; numberOfFaces++) { 
 
    createElement(numberOfFaces); 
 
    } 
 
} 
 

 
number = 0; 
 

 
function createElement() { 
 
    number++; 
 
    //creating the image on the leftside 
 
    var smiley = document.createElement('img'); 
 
    smiley.src = "smile.png"; 
 
    smiley.style.position = "absolute"; 
 
    smiley.style.left = randomX; 
 
    smiley.style.top = randomY; 
 
    theLeftSide.appendChild(smiley); 
 
}

#leftSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#rightSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
    left: 500px; 
 
    border-left: 1px solid black; 
 
}

<body id="smileyGuessingGame" onload="generateFaces()"> 
 
    <h1>Matching Game</h1> 
 
    <p>Click on the extra smiling face on the left</p> 
 
    <div id="leftSide"> 
 
    </div> 
 
    <div id="rightSide"> 
 
    </div> 
 

 

 
</body>

來源

2015-12-17 Luke

有在你的代碼中的一些語法錯誤。試試這個：https://jsfiddle.net/ptv2c6jd/ – Rayon

@RayonDabre編輯 – Luke

試試這個：https://jsfiddle.net/ptv2c6jd/1/'toFixed'會返回字符串，''parseInt'應該用.. – Rayon

有在你的代碼少的語法錯誤。您可以將您的代碼與下面提供的代碼進行比較。

另請注意toFixed返回一個numObj的字符串表示形式，它不使用指數表示法，並且在小數點後有精確的數字位數。

試試這個：

var theLeftSide = document.getElementById("leftSide"), 
 
    top_position = parseInt(Math.random() * ($(document).width() - 500)), 
 
    left_position = parseInt(Math.random() * ($(document).width() - 500)); 
 

 
function generateFaces() { 
 
    for (var numberOfFaces = 0; numberOfFaces < 5; numberOfFaces++) { 
 
    createElement(numberOfFaces); 
 
    } 
 
} 
 

 
var number = 0; 
 

 
function createElement() { 
 
    number++; 
 
    //creating the image on the leftside 
 
    var smiley = document.createElement('img'); 
 
    smiley.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Smiley_head_happy.svg/2000px-Smiley_head_happy.svg.png"; 
 
    smiley.style.position = 'absolute'; 
 
    smiley.style.top = top_position + "px"; 
 
    smiley.style.left = left_position + "px"; 
 
    theLeftSide.appendChild(smiley); 
 
    top_position += 20; 
 
    left_position += 20; 
 
}

#leftSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#rightSide { 
 
    position: absolute; 
 
    width: 500px; 
 
    height: 500px; 
 
    left: 500px; 
 
    border-left: 1px solid black; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<body id="smileyGuessingGame" onload="generateFaces()"> 
 
    <h1>Matching Game</h1> 
 
    <p>Click on the extra smiling face on the left</p> 
 
    <div id="leftSide"> 
 
    </div> 
 
    <div id="rightSide"> 
 
    </div> 
 
</body>

Fiddle here

來源

2015-12-17 04:30:01 Rayon

好吧，我只需要問我是否只想使用javascript：那將是：document.onload（）？ – Luke

不，只需在關閉''之前放上你的js即可。如果你正在使用外部js文件，那麼也包括它... – Rayon

也許這樣的事情可以工作：

function generateRandom(min, max) { 
     var num = Math.random() * (max - min) + min; 
     return Math.floor(num); 
    } 

    var width, 
     height, 
     img; 
    width = $('#leftSide').width(); 
    height = $('#leftSide').height(); 
    img = $('<img id="smiley">'); 
    img.attr('src', 'http://vignette2.wikia.nocookie.net/robocraft/images/2/26/Smile.png'); 
    img.css('top',generateRandom(0,height)); 
    img.css('left',generateRandom(0,width)); 
    img.appendTo('#leftSide');

演示：http://codepen.io/anon/pen/PZZrzz

來源

2015-12-17 04:29:11 salc2

我這個代碼使用jQuery和lodash。這裏有一個的jsfiddle：

https://jsfiddle.net/mckinleymedia/3z6wsnyf/2/

的HTML：

<h1>Matching Game</h1> 
<p>Find the unique image</p> 
<div class="game"></div>

，代碼：

var game = function(options) { 
    var panes = 2, 
    game = $('.game'), 
    height = 500, 
    width = game.width()/panes - 20, 
    itemSize = 50, 
    faces = 5, 
    guesses = 5, 
    setupBoard = function() { 
     game 
     .empty(); 
     _.times(panes, function(p) { 
     game 
      .append(
      $('<div>') 
      .addClass('pane pane' + p) 
      .css('height', height + 'px') 
      .css('width', width + 'px') 
     ); 
     }) 
    }, 
    startGame = function() { 
     _.times(faces, function(i) { 
     _.times(panes, function(p) { 
      $('.pane' + p) 
      .append(
       $('<img>') 
       .attr('src', 'http://lorempixel.com/200/20' + i) 
       .addClass('img-' + i) 
       .css('top', _.random(height - itemSize) + 'px') 
       .css('left', _.random(width - itemSize) + 'px') 
      ); 
     }) 
     }); 
     $('.game img').click(function() { 
     guesses--; 
     alert('Nope! You\'ve got ' + guesses + ' guesses remaining.'); 
     }); 
     $('.pane' + _.random(panes - 1)) 
     .append(
      $('<img>') 
      .attr('src', 'http://lorempixel.com/200/20'+ (faces + 1)) 
      .addClass('img-t') 
      .css('top', _.random(height - itemSize) + 'px') 
      .css('left', _.random(width - itemSize) + 'px') 
      .click(function() { 
      alert('You got it! Good job! You just cleared ' + faces + ' images! You\'ve got ' + guesses + ' guesses remaining.'); 
      faces++; 
      setupBoard(); 
      startGame(); 
      }) 
     ); 
     $('.game img') 
     .css('height', itemSize + 'px') 
     .css('width', itemSize + 'px') 
     .css('-moz-border-radius', itemSize/2 + 'px') 
     .css('-webkit-border-radius', itemSize/2 + 'px') 
     .css('border-radius', itemSize/2 + 'px') 
     .css('-khtml-border-radius', itemSize/2 + 'px') 

    }; 
    setupBoard(); 
    startGame(); 
}; 
game();

來源

2015-12-17 07:02:47

我怎麼能隨意在JavaScript設置

回答

相關問題