刷新一次，圖片更換一次

時間 2019-12-14

標籤刷新一次圖片更換简体版

原文原文鏈接

前段時間在分析Apple的官網代碼時，發現了一個很不錯的特效，即網頁刷新一次的時候，圖片會自動的換一次。好比你們打開www.apple.com/cn/的時候，有時候就會發現網頁下面的tile部分會進行圖片的輪詢切換。這種效果在apple的實現是經過判斷來實現的，因爲保密性的緣由，不能在這裏給你們展現源碼。
如今我給你們提供另一種解決思路，即經過localStorage中的pagecount屬性和頁面佈局相結合來實現這個效果javascript

首先咱們明白localStorage 是HTML 5提供的沒有時間限制的數據存儲，咱們能夠利用它來對用戶訪問頁面的次數進行計數css

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script>
 if (localStorage.pagecount){
 localStorage.pagecount=Number(localStorage.pagecount) +1;
 }
 else{
 localStorage.pagecount=1;
 }
 document.write("刷新頁面次數: " + localStorage.pagecount + " time(s).");
 var num = localStorage.pagecount;
 alert(num);
 var b = num % 2;
 alert(b);
 if(b==0){
 bodyBgs[0] = "#first"
 }else{
 bodyBgs[0] = "#last"
 }
 </script>
</body>
</html>

經過這種方式，判斷用戶到底刷了多少次頁面。而後刷奇數次頁面的時候，顯示一張背景圖，偶數次頁面的時候顯示另一張背景圖，完整代碼奉上html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #box li{
 list-style: none;
 width: 200px;
 height: 200px;
 margin: auto;
 border:3px solid red;
 float: left;
 }
 #first{
 display: block;
 width: 200px;
 height: 200px;
 }
 #last{
 display: block;
 width: 200px;
 height: 200px;
 }
 .f-li-f{

 background-image: url(images/bg1.jpg);
 }
 .f-li-l{

 background-image: url(images/bg2.jpg);
 }
 .two-li-f{

 background-image: url(images/bg1.jpg);
 }
 .two-li-l{

 background-image: url(images/bg3.jpg);
 }
 .thr-li-f{

 background-image: url(images/bg1.jpg);
 }
 .thr-li-l{

 background-image: url(images/bg4.jpg);
 }
 .fo-li-f{

 background-image: url(images/bg1.jpg);
 }
 .fo-li-l{

 background-image: url(images/bg5.jpg);
 }

 </style>
</head>
<body>
 <div id="box">
 <li>
 <a href="#" id="first" class="f-li-f"></a>
 <a href="#" id="last" class="f-li-l"></a>
 </li>
 <li>
 <a href="#" id="first" class="two-li-f"></a>
 <a href="#" id="last" class="two-li-l"></a>
 </li>
 <li>
 <a href="#" id="first" class="thr-li-f"></a>
 <a href="#" id="last" class="thr-li-l"></a>
 </li>
 <li>
 <a href="#" id="first" class="fo-li-f"></a>
 <a href="#" id="last" class="fo-li-l"></a>
 </li>
 </div>
</body>
 <script>
 var class1 = "#first";
 var class2 = "#last";
 var o = { 
 message: (function(class1,class2) { 
 var bodyBgs = [];
 if (localStorage.pagecount){
 localStorage.pagecount=Number(localStorage.pagecount) +1;
 }else{
 localStorage.pagecount=1;
 }
 var num = localStorage.pagecount;
 var b = num % 2;
 if(b==0){
 bodyBgs[0] = class1
 }else{
 bodyBgs[0] = class2
 }
 document.write('<style>' + bodyBgs[0] +'{display:none}</style>') 
 } (class1,class2)), 
 }; 
 o.message; 
 </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。