如是使用JS实现页面内容随机显示
之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平。本文我们将和大家一起分享,如何使用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实现页面内容随机显示的更多相关文章
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- clipboard.js实现页面内容复制到剪贴板
clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...
- 使用html2canvas.js实现页面截图并显示或上传
最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- 使用JS导出页面内容到Excel
JS代码 <script> $(function(){ // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HT ...
- JS 中div内容的显示和隐藏
1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...
- js更新页面,随机更新数字
代码1: <script> function getRandom(){ var i = Math.random()*40+160; document.getElementById(&quo ...
- 使用clipBoard.js进行页面内容复制
官方网址: https://clipboardjs.com/
随机推荐
- socket聊天室(服务端)(多线程)(TCP)
#include<string.h> #include<signal.h> #include<stdio.h> #include<sys/socket.h&g ...
- Dubbox中开发REST风格的远程调用
转载: http://zyg345646335.iteye.com/blog/2208899
- jdbc的配置及jdbc连接常用数据库(mysql、sqlserver、Oracle)
1.连接SQL Server数据库 import java.sql.*; publicclassMain{publicstaticvoid main(String[] args){String dri ...
- 二阶段项目所遇问题 如何实现php向js传输数据
首先当前页面做了一个双处理的界面,就是有PhP也有JS的处理界面. 上一个传值界面是一个PHP的传值,结果,在当前页面的JS中也要用到上一界面传的值,这时发现,PHP与JS就像是两个互相孤立的小岛,根 ...
- cal日历工具的用法
cal的基本语法:$ cal [month] [year] 1.显示当前月的日历 $ cal 2.显示某年的日历 $ cal 2015 3.显示某年某月日历 $ cal 12 2015 =-=-=-= ...
- 实现容器的底层技术 - 每天5分钟玩转 Docker 容器技术(30)
为了更好地理解容器的特性,本节我们将讨论容器的底层实现技术.cgroup 和 namespace 是最重要的两种技术.cgroup 实现资源限额, namespace 实现资源隔离. cgroup c ...
- 【翻译Autofac的帮助文档】1.入门指南
[写在前面]尝试做完一件工作之外自我觉得有意义的一件事,那就从翻译Autofac的帮助文档吧. 入门指南 将Autofac集成你的应用程序的步骤通常很简单,一般是: 时刻以IOC(控制反转)的思想来规 ...
- php通过cURL下载网络上面的一个HTTPS的资源
<?php /** * php通过cURL下载网络上面的一个HTTPS的资源 * 案例:从google的CDN上下载jquery- v1.7.1 */ $curlobj = curl_init( ...
- 门控开关项目--整流桥分析,LED限流电阻选择
完整的原理图 常见电阻 常见的精度分为5% 和1%精度,碳膜电阻5%精度,金属膜电阻1%精度. 常见的阻值有 10R, 100R, 330R, 1K, 2K, 3K, 5.1K, 10K, 15K, ...
- Example003通过按钮创建窗口
<!--实例003通过按钮创建窗口--> <head> <meta charset="UTF-8"> </head> <for ...