学做网站培训课程介绍

当前位置:

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

一些单页网站会有不断循环显示不同信息的功能,隔几秒就会显示一个显示,显示几秒后又消失,然后再显示另一个信息,以此往复。怎么做这种功能呢?

这种功能就是通过JQUERY 的setTimeout()函数来制作的。代码如下:


<div id="toast" style="position: fixed; z-index: 999; top: 75%; text-align: center; width: 100%; display: none;">
<span id="toast_content" style="">消息提醒:来自珠海的郑女士刚添加了微信</span>
</div>
<script type="text/javascript">
/* toast start */
var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', '淄博', '东莞', '昆山', '无锡', '阳江', '钦州', '天津', '厦门', '深圳', '株洲', '达州', '成都', '重庆', '北海', '福州', '梧州', '青海'];
var 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();
setTimeout("dismissToast()", 1000);
}

function dismissToast() {
$("#toast").fadeOut();
setTimeout("showToast()", 1000 + Math.round(Math.random() * 5000));
}
dismissToast();
</script>

代码解释:

Math.round():计算函数,数加上0.5之后,向下取整;

Math.random():取等于0.0、小于1.0的之间的随机数

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程