`
GavinHsueh
  • 浏览: 70896 次
文章分类
社区版块
存档分类
最新评论

如何使用JS实现页面内容随机显示

阅读更多

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平。本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示。

 

这里我以本地的蝉知建站 系统为例,给大家演示一下实现流程。

首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好。例如:

 

 

联系人:张三

电话:1316566632

QQ:319972959

地址:青岛开发区武夷山路167号千禧龙花园

联系人:李四

电话:18565539726

QQ:1749999398

地址:青岛开发区武夷山路167号千禧龙花园

联系人:王五

电话:17663988485

QQ:1481456768

地址:青岛开发区武夷山路167号千禧龙花园

 

然后通过JS代码来控制,代码逻辑就是先将所有信息隐藏,再获取当前时间秒数,根据要显示的信息个数求余,余数的个数即信息的个数,然后分别对应显示。代码如下:

 

 

$(document).ready(function()
{
    $('#p1, #p2, #p3').hide(); 
    second = new Date().getSeconds();
    if((second % 3) == 0) $('#p1').show();
    if((second % 3) == 1) $('#p2').show();
    if((second % 3) == 2) $('#p3').show();    
});

 

我们一起来看一下前台效果:

 

是不是很简单,本文我们一起分享学习了如何通过JS控制页面内容随机显示,如果大家还有其他的实现方法或疑问,欢迎一起分享交流,我们共同学习,共同进步。

 

更多技术文章欢迎关注公众号

0
0
分享到:
评论

相关推荐

    JS实现页面载入时随机显示图片效果

    本文将详细介绍如何使用JavaScript技术实现页面载入时随机显示图片的效果。 首先,要实现随机显示图片的功能,我们首先需要准备一些图片资源,并将它们放在服务器上的某个目录中,比如名为“img”的目录下。这些...

    JS实现网页标题随机显示名人名言的方法

    这段代码实现每次刷新过后,网页的标题都会随机显示名人名言,一次一条,把这些名言定义在Javascript的数组内,每次调用随机调用一条,随机产生的随机数正好是数组的标号,这样就实现了随机,不错的效果吧。...

    原生js当页面刷新多张图片随机显示代码

    在JavaScript(JS)编程中,实现页面刷新时多张图片随机显示的功能,主要涉及到几个核心概念:DOM操作、数组操作以及随机数生成。下面将详细解释这些知识点。 1. **DOM操作**: - DOM(Document Object Model)是...

    js实现分组随机显示程序

    在JavaScript编程领域,"js实现分组随机显示程序"是一个常见的需求,特别是在开发网页互动功能或者数据处理应用时。这个小程序的核心目标是根据输入的起始和结束号码,将一系列数字进行随机分组。这样的功能可能应用...

    HTML+CSS+JavaScript实现网页版随机抽签.zip

    本项目"HTML+CSS+JavaScript实现网页版随机抽签.zip"显然是一个使用这三种技术来创建的互动抽签应用。 首先,HTML部分是构建抽签应用的基础框架。它定义了页面的基本结构,包括标题、段落、按钮等元素。例如,可能...

    随机显示图片的JavaScript脚本

    通过这种方式,我们可以使用JavaScript实现随机显示图片的效果。在实际项目中,可能还需要考虑错误处理、图片加载状态的监控等复杂情况,但以上代码已经足够展示基本原理。 在提供的链接(codefans.net)中,你可能...

    随机显示图片代码.zip

    总的来说,"随机显示图片代码.zip"文件提供的内容涉及到HTML、JavaScript、图片处理等多个方面,对于学习网页动态效果的实现以及理解前端开发流程具有实际价值。解压并研究这些文件可以加深对随机显示图片代码工作...

    js实现的随机显示图片代码demo.rar

    在JavaScript(简称JS)中,实现随机显示图片是一项常见的任务,尤其在网页动态效果和用户交互设计中。这个"js实现的随机显示图片代码demo.rar"压缩包可能包含了一个简单的示例,用于演示如何利用JavaScript来达到这...

    JavaScript 右下角随机显示的JS图片广告.rar

    本资源“JavaScript 右下角随机显示的JS图片广告.rar”显然包含了一个实现JavaScript图片广告在网页右下角随机展示的示例代码。这种技术常常用于吸引用户的注意力,提高网站的互动性和宣传效果。 在JavaScript中,...

    jquery无刷新表格内容文字或者图片随机显示渐隐champagne.js.zip

    本文将深入探讨如何利用jQuery库实现一个无刷新的表格内容随机渐隐效果,特别关注的是一个名为"Champagne.js"的JavaScript插件。这个插件允许我们在表格中的文字或图片上实现这种效果,增加页面的互动性和视觉趣味性...

    jquery随机显示文字

    本项目"jquery随机显示文字"是利用jQuery来实现一种动态效果,即文字的随机显示,包括文字内容、大小、颜色以及它们在页面中的展示顺序。这个效果通常用于创建吸引用户注意力的互动界面或者增加网站的趣味性。 首先...

    随机轮播JS网页特效

    随机轮播JS网页特效是一种常见的网页设计技术,用于在网页上展示一组图片、文本或其它内容,通过自动或手动切换的方式实现动态展示效果。这种特效能够吸引用户注意力,提升用户体验,广泛应用于网站的首页、产品展示...

    JavaScript随机图片显示

    这里,我们给`<img>`标签添加了一个`load`事件监听器,当图片加载完成后,调用`displayRandomImage`函数,实现图片的随机显示。 在实际项目中,可能还需要考虑一些其他因素,例如图片预加载,防止用户在图片加载...

    JS 最少代码实现随机十位字符串

    标题“JS最少代码实现随机十位字符串”涉及的是JavaScript编程中的一个常见任务——生成一个包含特定长度(这里是十位)的随机字符串。在Web开发中,这种功能可能用于创建唯一标识符、密码生成或者在URL中传递临时...

    随机显示图片代码.rar

    本项目“随机显示图片代码”聚焦于使用JavaScript实现一个图片相册功能,它能随机展示一组图片,为用户带来更丰富的视觉体验。以下是对这个项目的详细解析: 首先,我们要理解“随机显示图片”的概念。在网页上,...

    原生js页面上随机显示笑脸图片布局代码

    这个场景可以通过使用原生JavaScript实现,无需依赖任何库如jQuery。在这个主题下,我们将深入探讨如何用JavaScript来实现在页面上随机展示笑脸图片,以及涉及到的相关知识点。 首先,我们需要准备笑脸图片。在提供...

    jquery随机头像显示

    3. **随机化选择**:为了实现“随机”,我们需要使用JavaScript的Math.random()函数来生成一个介于0和1之间的随机数,然后通过这个随机数来选取头像。可以将所有头像的索引存储在一个数组中,每次显示时随机选取一个...

    js随机点名程序

    描述同样为“js随机点名程序”,没有提供额外的信息,但可以推测该程序主要使用JavaScript(简称JS)编写,目标是为了实现随机点名的功能。 #### 标签解读 - **js**:表明程序的编程语言基础是JavaScript。 - **...

    随机显示的背景(HTML经典用例)

    在这个例子中,我们使用了 JavaScript 的数组、随机数和字符串操作来实现背景图片的随机显示。 数组 在 JavaScript 中,数组是一种基本数据类型,用于存储多个值。我们可以使用 `new Array()` 构造函数来创建一个...

Global site tag (gtag.js) - Google Analytics