jQuery 实现单页网站循环显示信息功能

温馨提示：手机扫码可阅读当前文章!
文章简介：如何在jQuery 实现单页网站循环显示信息功能，在一些单页网站中，经常会看到不断循环显示不同信息的功能。每隔几秒钟，就会展示一个信息，并在显示几秒后消失，然后又展示另一个信息，如此循环往复。那么我们可以通过使用 jQuery 的 setT...

如何在jQuery 实现单页网站循环显示信息功能，在一些单页网站中，经常会看到不断循环显示不同信息的功能。每隔几秒钟，就会展示一个信息，并在显示几秒后消失，然后又展示另一个信息，如此循环往复。那么我们可以通过使用 jQuery 的 setTimeout() 函数来实现这样的功能。jQuery如何实现在网页中循环显示订单？当然你改一下内容或者样式它就可以变成一个循环显示订单信息的功能！

先看代码：

<div id="toast" style="position: fixed; z-index: 999; top: 75%; text-align: center; width: 100%; display: none;">
    <span id="toast_content">消息提醒：来自珠海的郑女士刚添加了微信</span>
</div>
<script type="text/javascript">
    /* toast start */
    var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', '淄博', '东莞', 
                '昆山','无锡','阳江','钦州','天津','厦门',
                 '深圳'+'株洲'], 
        person = ['赵先生', '吴女士' , ...
                  ];
    function showToast() {
        var areaIndex = Math.round(Math.random() * (area.length - 1));
        var personIndex = Math.round(Math.random() * (person.length - 1));
        
      // 更新提示内容
        $("#toast_content").text("消息提醒：来自" + area[areaIndex] + "的" + person[personIndex] + "刚添加了微信");
        // 展示提示框
        $("#toast").fadeIn();
      // 1秒后隐藏提示框
        setTimeout("dismissToast()", 1000);
    }
    function dismissToast() {
      // 隐藏提示框
        $("#toast").fadeOut();
       // 设置随机的时间间隔，再次展示下一个信息
        setTimeout("showToast()", 1000 + Math.round(Math.random() * 5000));
    }
    
   // 页面加载后自动执行循环显示信息功能
   $(document).ready(function(){
      showToast();
   });
</script>

如果你看不懂代码，接下来我们对代码进行注释：

<div id="toast" style="position: fixed; z-index: 999; top: 75%; text-align: center; width: 100%; display: none;">
    <span id="toast_content">消息提醒：来自珠海的郑女士刚添加了微信</span> <!-- 消息提醒内容 -->
</div>
<script type="text/javascript">
/* toast start */
  
var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', 
            '淄博','东莞','昆山',
             '无锡 ','阳江 ',...
            ]; 
var person = [
              ...
                ];
function showToast() {
    var areaIndex = Math.round(Math.random() * (area.length - 1)); // 随机生成区域索引值（通过Math.random函数获取介于0-1之间的随机数再乘以需要范围值，Math.round取整）
    var personIndex = Math.round(Math.random() * (person.length - 1)); // 随机生成人员索引值
    $("#toast_content").text("消息提醒：来自" + area[areaIndex] + "的" + person[personIndex] + "刚添加了微信");  // 在提示框中更新消息内容
    $("#toast").fadeIn(); // 显示提示框
    setTimeout("dismissToast()", 1000); // 设置定时器，在固定时间后隐藏提示框，并执行 dismissToast 函数
}
function dismissToast() {
    $("#toast").fadeOut(); // 隐藏提示框
  setTimeout("showToast()", 1000 + Math.round(Math.random() * 5000)); 
 // 展示下一个信息之前的延迟时间：1秒加上随机的延迟（通过Math.random函数获取介于0-1之间的随机数再乘以最大毫秒数）
}
$(document).ready(function(){
        showToast(); 
});
</script>

本段代码实现了单页网站循环显示信息功能。首先在页面中定义了一个用来展示提示信息的 div 容器，并设置其样式和初始文本。

然后通过 JavaScript 操作，使用两个数组分别存储不同区域和人物名称数据。

接下来定义了 `showToast()` 函数用于显示具体要展示的信息，在该函数内部通过 random 数字生成随机索引，从而让每次弹出窗口时呈现不同的区域和人物信息。

之后使用 `fadeIn()` 方法展示提示框，并设置定时器让其在显示 1 秒后调用 `dismissToast()` 函数，隐藏提示框并再次随机等待一段时间以展示下一个信息。最后，在页面加载完成时自动触发该循环功能。