571
如是使用JS實現頁麵內容隨機顯示
之前有個客戶谘詢我，因為他們公司的業務員有多個人，但公司網站的聯係方式板塊裏隻夠放一個人的信息，所以就想能不能實現這個聯係方式信息隨機顯示，對於業務或客服人員來說也能做到分配均勻公平。本文我們將和大家一起分享，如何使用js控製實現頁麵內容隨機顯示。
這裏我以本地的蟬知建站係統為例，給大家演示一下實現流程。
首先將想要顯示的不同內容分別放到不同的盒子裏(div)，並用ID屬性標記好。例如：
<div > <p>聯係人：張三</p> <p>電話：1316566632</p> <p>ＱＱ：319972959</p> <p>地址：青島開發區武夷山路167號千禧龍花園</p> </div> <div > <p>聯係人：李四</p> <p>電話：18565539726</p> <p>ＱＱ：1749999398</p> <p>地址：青島開發區武夷山路167號千禧龍花園</p> </div> <div > <p>聯係人：王五</p> <p>電話：17663988485</p> <p>ＱＱ：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控製頁麵內容隨機顯示，如果大家還有其他的實現方法或疑問，歡迎一起分享交流，我們共同學習，共同進步。
最後更新：2017-07-24 10:33:13