gpt4 book ai didi

javascript - 为每个 div 创建随机顶部、右侧

转载 作者:行者123 更新时间:2023-11-28 15:51:08 25 4
gpt4 key购买 nike

我想为每个 div 创建随机 top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.cube {
width:50px;
height:50px;
background-color:red;
border-radius:25px;
position:absolute;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
var Wh = window.innerHeight;
var number = 1 + Math.floor(Math.random() * Wh);
$('.cube').each(function() {
$(this).css({"right":number+"px","top":number+"px"});
});
});
</script>

</head>

<body>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</body>
</html>

我不知道为什么每个功能在这里不起作用!我看到只有一个 div 发生了变化,我该如何解决这个问题?

最佳答案

关闭您的<div> s 并将 ID 更改为类:

<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>

现在,我认为您想对每个立方体应用不同的位置,因此请像这样更改代码:

$(function () {       
var Wh = window.innerHeight;
$('.cube').each(function() {
var number = 1 + Math.floor(Math.random() * Wh);
$(this).css({"right":number+"px","top":number+"px"});
});
});

$(this)部分很重要,因为它将定位应用于单个 DOM 元素,而不是所有具有 .cube 类的元素。 .

更新

还将随机数生成器移至 each函数,这样每次都会生成一个新的数字。

关于javascript - 为每个 div 创建随机顶部、右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20547806/

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