gpt4 book ai didi

javascript图像位置

转载 作者:太空宇宙 更新时间:2023-11-04 02:51:37 25 4
gpt4 key购买 nike

我试图将微笑图像放在左侧 div 的随机位置。但图像不是随机出现的,而是连续显示图像。为什么会这样?

<html>
<head>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id= "leftSide"></div>
<div id = "rightSide"></div>
<style>
img1 {position:absolute}
div {position:absolute; width:500px;height: 500px}
#rightSide {left:500px;border-left: 1px solid black}
</style>
<script>
var numberOfFaces =5,i;
var theLeftSide = document.getElementById("leftSide");


function generateFaces()
{
for( i=0;i<numberOfFaces;i++)
{
var img1 =document.createElement("img");
img1.src = "smile.png";
var topran = Math.random() * 400;
var topran = Math.floor(topran);
var leftran = Math.random() *400;
var leftran = Math.floor(leftran);
img1.style.top = topran + "px";
img1.style.left = leftran + "px";
theLeftSide.appendChild(img1);
}
}

</script>
</head>
<body onload = "generateFaces()">

</body>
</html>

最佳答案

您不能在 CSS 中使用 img1 {position:absolute} 来设置微笑图像的样式。将您的 CSS 更改为 .smile {position:absolute}(类选择器)并在 img1 上设置类 smile

var img1 =document.createElement("img");
img1.src = "smile.png";
img1.className = "smile";

关于javascript图像位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32895150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com