我试图让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>
有在你的代码中的一些语法错误。试试这个:https://jsfiddle.net/ptv2c6jd/ – Rayon
@RayonDabre编辑 – Luke
试试这个:https://jsfiddle.net/ptv2c6jd/1/'toFixed'会返回字符串,''parseInt'应该用.. – Rayon