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

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

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

<div id="p1">
<p>联系人:张三</p>
<p>电话:1316566632</p>
<p>QQ:319972959</p>
<p>地址:青岛开发区武夷山路167号千禧龙花园</p>
</div>

<div id="p2">
<p>联系人:李四</p>
<p>电话:18565539726</p>
<p>QQ:1749999398</p>
<p>地址:青岛开发区武夷山路167号千禧龙花园</p>
</div>

<div id="p3">
<p>联系人:王五</p>
<p>电话:17663988485</p>
<p>QQ:1481456768</p>
<p>地址:青岛开发区武夷山路167号千禧龙花园</p>
</div>

然后通过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控制页面内容随机显示,如果大家还有其他的实现方法或疑问,欢迎一起分享交流,我们共同学习,共同进步。

如是使用JS实现页面内容随机显示的更多相关文章

  1. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  2. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  3. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  4. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  5. 使用clipboard.js复制页面内容到剪切板

    最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...

  6. 使用JS导出页面内容到Excel

    JS代码 <script> $(function(){ // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HT ...

  7. JS 中div内容的显示和隐藏

    1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...

  8. js更新页面,随机更新数字

    代码1: <script> function getRandom(){ var i = Math.random()*40+160; document.getElementById(&quo ...

  9. 使用clipBoard.js进行页面内容复制

    官方网址: https://clipboardjs.com/

随机推荐

  1. socket聊天室(服务端)(多线程)(TCP)

    #include<string.h> #include<signal.h> #include<stdio.h> #include<sys/socket.h&g ...

  2. Dubbox中开发REST风格的远程调用

    转载: http://zyg345646335.iteye.com/blog/2208899

  3. jdbc的配置及jdbc连接常用数据库(mysql、sqlserver、Oracle)

    1.连接SQL Server数据库 import java.sql.*; publicclassMain{publicstaticvoid main(String[] args){String dri ...

  4. 二阶段项目所遇问题 如何实现php向js传输数据

    首先当前页面做了一个双处理的界面,就是有PhP也有JS的处理界面. 上一个传值界面是一个PHP的传值,结果,在当前页面的JS中也要用到上一界面传的值,这时发现,PHP与JS就像是两个互相孤立的小岛,根 ...

  5. cal日历工具的用法

    cal的基本语法:$ cal [month] [year] 1.显示当前月的日历 $ cal 2.显示某年的日历 $ cal 2015 3.显示某年某月日历 $ cal 12 2015 =-=-=-= ...

  6. 实现容器的底层技术 - 每天5分钟玩转 Docker 容器技术(30)

    为了更好地理解容器的特性,本节我们将讨论容器的底层实现技术.cgroup 和 namespace 是最重要的两种技术.cgroup 实现资源限额, namespace 实现资源隔离. cgroup c ...

  7. 【翻译Autofac的帮助文档】1.入门指南

    [写在前面]尝试做完一件工作之外自我觉得有意义的一件事,那就从翻译Autofac的帮助文档吧. 入门指南 将Autofac集成你的应用程序的步骤通常很简单,一般是: 时刻以IOC(控制反转)的思想来规 ...

  8. php通过cURL下载网络上面的一个HTTPS的资源

    <?php /** * php通过cURL下载网络上面的一个HTTPS的资源 * 案例:从google的CDN上下载jquery- v1.7.1 */ $curlobj = curl_init( ...

  9. 门控开关项目--整流桥分析,LED限流电阻选择

    完整的原理图 常见电阻 常见的精度分为5% 和1%精度,碳膜电阻5%精度,金属膜电阻1%精度. 常见的阻值有 10R, 100R, 330R, 1K, 2K, 3K, 5.1K, 10K, 15K, ...

  10. Example003通过按钮创建窗口

    <!--实例003通过按钮创建窗口--> <head> <meta charset="UTF-8"> </head> <for ...