如何实现网站每次加载时随机显示指定h1引导元素？

首先得提一句你现有代码里的小疏漏：你的jQuery选择器漏掉了类选择器的.前缀，应该写成$(".intro_text1")而不是$("intro_text1")，不然jQuery找不到对应的元素哦。

接下来咱们搞定随机显示的需求，其实很简单，通过生成随机数来决定每次显示哪一个标题就行，具体步骤如下：

1. 保留现有HTML结构 #

你的两个h1标签可以完全保留，它们默认display: none的状态正好符合我们的需求：

<h1 class="intro_text1" style="display: none;position: absolute; top:60%; left: 50%;font-size: 2em;font-family: 'Stylish', sans-serif;">Have you heard about the song of Ice and Fire?</h1>
<h1 class="intro_text2" style="display: none;position: absolute; top:40%; left: 50%;font-size: 2em;font-family: 'Stylish', sans-serif;">Test2?</h1>

2. 修改jQuery代码实现随机逻辑 #

不用写两个$(document).ready()回调，一个就够了。在里面生成0或1的随机数，然后根据随机数选中对应的h1执行动画：

$(document).ready(function() {
  // 生成0或1的随机整数，0对应第一个标题，1对应第二个
  const randomIndex = Math.floor(Math.random() * 2);
  
  // 根据随机数选择要显示的目标元素
  const targetElement = randomIndex === 0 ? $(".intro_text1") : $(".intro_text2");
  
  // 执行淡入、停留3秒、淡出的动画流程
  targetElement.fadeIn().delay(3000).fadeOut();
});

代码小解释： #

• Math.random()会生成0到1之间的随机浮点数，乘以2后得到0-2的范围，再用Math.floor()取整，就刚好得到0或1两个随机值。
• 用三元运算符判断随机数，精准选中要显示的标题元素。
• 链式调用fadeIn().delay(3000).fadeOut()，完美还原你原本想要的动画效果。

如果以后要加更多intro标题，只需要给新h1加类似intro_text3的类，然后把Math.random() * 2里的2改成标题总数就行，扩展性拉满。

内容的提问来源于stack exchange，提问作者cdxJava