如何随机化在10秒、20秒、30秒内一致显示的3个div的顺序
为了随机化在10秒、20秒、30秒内一致显示的3个div的顺序，可以使用以下方法：
- 使用JavaScript来实现随机化的效果。可以通过Math.random()函数生成一个0到1之间的随机数，然后根据这个随机数来确定div的顺序。
- 首先，给每个div一个唯一的标识符或类名，例如div1、div2、div3。
- 使用setTimeout函数来设置每个div的显示时间。可以根据需要设置不同的时间间隔，例如10秒、20秒、30秒。
- 在每个setTimeout函数中，使用Math.random()函数生成一个0到1之间的随机数，然后根据这个随机数来判断显示哪个div。可以使用条件语句（if-else语句）来实现。
- 在条件语句中，根据随机数的范围来确定显示哪个div。例如，如果随机数小于0.33，则显示div1；如果随机数大于等于0.33且小于0.66，则显示div2；如果随机数大于等于0.66，则显示div3。
- 在每个条件分支中，使用CSS的display属性将对应的div设置为可见（display: block），其他div设置为隐藏（display: none）。
以下是示例代码：
HTML：
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>JavaScript：
// 随机化div的顺序
function randomizeDivOrder() {
var randomNum = Math.random();
if (randomNum < 0.33) {
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
} else if (randomNum >= 0.33 && randomNum < 0.66) {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
document.getElementById("div3").style.display = "none";
} else {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "block";
}
}
// 设置显示时间
setTimeout(randomizeDivOrder, 10000); // 10秒
setTimeout(randomizeDivOrder, 20000); // 20秒
setTimeout(randomizeDivOrder, 30000); // 30秒请注意，以上代码只是示例代码，具体实现可能需要根据实际情况进行调整。
另外，根据要求，我不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等云计算品牌商的相关产品和链接。如果您需要了解相关产品和服务，请在腾讯云官方网站（https://cloud.tencent.com/）进行搜索和浏览。
相关·内容
我有一个工作代码与3div与图片显示一致的时间在10秒，20秒，30秒。代码运行良好，但我需要以某种方式随机化的顺序，所以并不总是pic1显示在时间10秒，pic2显示在时间20秒和pic3显示在时间30秒。我想随机排列图片的顺序，这样每次加载页面时，图片都会有不同的
浏览 24提问于2020-10-24得票数 0
回答已采纳
目前，我正在使用从另一篇文章中获得的jquery代码来淡入淡出一些div$(document).ready(function () {
var divs = $('div[id，让它们在一种随意的幻灯片中淡入和淡出。我想将页面加载的显示顺序随机化，例如，现在它显示feature-1，然后feature-2，然后feature-3。我如何让它随
浏览 0提问于2013-05-23得票数 0
回答已采纳
我需要帮助在我定义的网格中随机化html元素的位置和大小的概念。我正在使用React做我的第一个项目，我的任务是创建一个应用程序，在这个应用程序中，我向用户显示两套黑色“卡片”(矩形)，用户必须从中选择一个。在给我的设计描述中，我被告知要随机化这些矩形集合的位置和大小，但每一条边的数量总是固定的。
换句话说，我在屏幕的左侧渲染3
浏览 0提问于2019-07-10得票数 1
5回答
我正在尝试以随机的顺序显示一系列图像。但是，在显示所有项之前，我不希望重复任何单个项，因此，我不想从数组中选择一个随机图像，而是希望获取整个数组，对其进行随机化，然后从第一个元素到最后一个元素按顺序选择。.jpg" class="img_lg"/><
浏览 4提问于2011-03-17得票数 9
回答已采纳
我非常肯定，suds没有缓存我的WSDL和XSD 。下面是我如何知道缓存的对象没有被使用的原因：
创建客户端大约需要30秒：client = Client(url)The记录器条目显示在整个30年间对XSD和WSDL文件的一致解析，secondsWireshark在整个30秒内向存储XSD和WSDL文件的服务器显示一致<
浏览 5提问于2011-05-17得票数 6
回答已采纳
1回答
_1和@recommendations_model_2是产品数组，我在rails视图中显示它们。id = "prod_box"> </div
浏览 1提问于2013-10-11得票数 0
回答已采纳
3回答
我在我的网站上使用这个代码来随机化div的顺序。在我的一个子页面上，我希望在稍微修改的版本中使用它--将再次以随机顺序显示12个div，但只有前3个将被显示，其余的将被设置为“Display:none”或使用js的相似效果。有任何建议如何修改以下代码，以便只出现3个第一个div</em
浏览 4提问于2014-03-07得票数 1
回答已采纳
下面的代码从XML文件中获取数据并输出div="item"中的每一项 }).fail(function(){ })然后我需要随机化子数组的输出，
浏览 2提问于2014-01-03得票数 2
回答已采纳
我正在PHP 7中构建一个出现日历，并希望以随机顺序显示日期1-24。for ($d = 1; $d <= 24; $d++) {}
浏览 1提问于2016-11-25得票数 1
回答已采纳
给了我这个结果：[1] - 8635console.log("بحد-8635".split('-'))当我试着分开：它给了我不同的结果如何才能正确地实现这一点？
浏览 7提问于2019-09-24得票数 29
回答已采纳
1回答
如何在我的UI在服务器函数中的dataset上填充计算时添加加载程序页？我的UI在大约30秒内填充了值。因此，我希望这个加载程序页面显示30秒，然后隐藏它以显示我的实际UI，到那时它已经被填满了。下面是示例代码： useShinyjs(), id = "loading_page"
浏览 1提问于2020-08-26得票数 1
回答已采纳
请验证您有足够的权限启动系统服务。”同时尝试在安装时启动服务。Windows事件查看器没有显示详细信息，但显示“安装失败”。编辑：
哲学家的回答是非常重要的。我的win form应用程序(
浏览 4提问于2015-01-25得票数 1
回答已采纳
1回答
每秒钟一次，一个div就应该眨眼。正确的知道它改变颜色，但我不知道如何改变它回到原来的颜色在1秒内。我希望每个随机的div在窗口上显示绿色而不是黄色，而不是回到绿色。然后转到下一个随机div。$(document).ready( function(){ for(var i = 0; i < 30 ; i++){
$di
浏览 4提问于2015-08-12得票数 0
回答已采纳
4回答
我知道，当您将float: right放到li元素时，它以相反的顺序显示，但是我如何修正顺序，使其“正确”显示在网站的右侧？现在它显示在网站的left端。我试着阅读了一些老问题，但没有找到任何可能对我有帮助的东西，而且，如何使header显示在#333333彩色标题的中间而不填充呢？auto元素会起作用吗？
class="header
浏览 6提问于2015-12-08得票数 0
回答已采纳
1回答
我有一个引导列，我想缩小到它的内容的高度，这样另一个列可以填充它下面的空间。以下是我所指的图片：我希望第一列--容纳两个头1盒--缩小到其内容的高度，这样“最后”的盒子就能填满空间。
<div class="box">col-1</div>
</div>
浏览 0提问于2020-10-01得票数 1
回答已采纳
是否有对CSS规则进行排序的规则？通常，每当我在上编辑CSS时，它会重新排序CSS，而在chrome开发工具上，它会保持原样。而则以完全不同的方式对它们进行排序。这就是Firebug中发生的事情
浏览 6提问于2013-05-20得票数 0
在数据库中，每一课都有一个名为position的列，因此对于最终用户，只需按position的顺序创建一个查询列表，然后它们就会以正确的顺序显示。问题出在管理面板中，在注册所有类之后，我想通过将它们拖到我想要的位置然后保存来组织这些类，如下例所示：
width: 400px;height: 30px;
line-heigh
浏览 18提问于2019-08-07得票数 2
回答已采纳
2回答
我试图创造一个测试，探索我们潜意识的界限。我想简单地展示一个数字，看看用户是否可以用他们的直觉来猜测其价值--他们的潜意识是否能够比他们有意识的自我更快地读取数字。因此，我试图在屏幕上闪现一个数字几毫秒。Chrome在这段代码中的表现似乎不如Edge。如何使它在不同浏览器之间更加一致地工作？
我尝试过各种隐藏和透露数字的方法。终于有了这个版本。document.getElementById("hiddenNumber&quo
浏览 1提问于2019-01-07得票数 0
回答已采纳
, params[:id]).order(:id).reverse_order format.jsend我的index.html电话；它呈现**outline\_outline_doc.html.erb **；
<div class><%= link_to o
浏览 1提问于2014-05-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
