如是使用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/
随机推荐
- IBM WebSphere ESB入门指南
[TOC] 第一章 ESB介绍 本博客介绍一款ESB产品,IBM WebSphere ESB.ESB(Enterprise Service Bus)也即企业服务总线.ESB有很多产品,IBM的IBM ...
- 框架和css基础
框架:一.框架集:1.<frameset></frameset>不能有<body>标签 属性:1)cols:把网页拆分成几列(左右拆分)eg:<framese ...
- 编译安装nginx却requires the PCRE library
编译安装nginx需要pcre包,未安装会有如下提示: ./configure: error: the HTTP rewrite module requires the PCRE library. Y ...
- ELK-Kibana-01
1.Kibana介绍 Kibana 是一个设计使用和Elasticsearch配置工作的开源分析和可视化平台.可以用它进行搜索.查看.集成Elasticsearch中的数据索引.可以利用各种图 ...
- Python之数据加密与解密及相关操作(hashlib模块、hmac模块、random模块、base64模块、pycrypto模块)
本文内容 数据加密概述 Python中实现数据加密的模块简介 hashlib与hmac模块介绍 random与secrets模块介绍 base64模块介绍 pycrypto模块介绍 总结 参考文档 提 ...
- excel转html 实现在线预览
首先说一下,本人发布的代码都是经过本人亲测,并且用在实际项目中.如果觉得可以,希望大家点个赞,谢谢大家. 有什么问题,大家评论出来,一起交流.好了,不废话了,下面来说一说这个东西怎么做. 网上也有许多 ...
- Windows 10环境安装VIM代码补全插件YouCompleteMe
Windows 10环境安装VIM代码补全插件YouCompleteMe 折腾一周也没搞定Windows下安装VIM代码补全插件YouCompleteMe,今天在家折腾一天总算搞定了.关键问题是在于P ...
- Swift基础语法
简介 特点 (1)优于OC,快速,安全 (2)取消了预编译指令包括宏定义(OC用的太多了) (3)取消了OC指针和不安全访问的使用(看不到星星了) (4)舍弃 Objective-C 早期应用 Sma ...
- 常用html标签的只读写法
<a href="baidu.com" onclick="event.returnValue=false;">百度</a> a链接的只读 ...
- ASP.NET MVC Bundling and RequireJS
关于ASP.NET MVC Bundling and RequireJS的取舍问题,最近比较困惑,我希望有一种方式可以结合两者的优点.作为.NET程序员,难道你没有过这方面的困惑吗? 因为我感觉各自都 ...