Hi,又見面了,在最近的一次需求中遇到一個問題,在這里總結下,希望和大家一起交流學習;
一.項目需求
歲末年初,公司旗下的app需要上線多個活動,需要制作一個聚合頁面,當從外部鏈接進入聚合頁面時候,隨機跳到活動頁面;
二.需求分析
當時考慮到兩個方向,一是在js中實現隨機跳轉,二是將鏈接存在數據庫,通過查詢鏈接返回到前台進行隨機跳轉,最后我采用第一種,因為方便,可能會有點不安全,大神勿噴;
三.解決方案
在實際開發中,我發現利用隨機數進行跳轉,前后兩次進入聚合頁面隨機跳轉進入同一個頁面的概率很大;
在下面的解決方案中,提供了兩種解決前后兩次進入聚合頁面隨機跳轉不重復的問題;
//存儲首次進入的隨機數 var globalNum = window.sessionStorage.getItem("skipNum", skipNum); $(function(){ /** * 第一種方案 * */ //獲取隨機數 var luckyNum = Math.round(Math.random()*3); //alert(luckyNum); if(luckyNum==0){ window.location.href = ""; }else if(luckyNum==1){ window.location.href = ""; }else if(luckyNum==2){ window.location.href = ""; }else if(luckyNum==3){ window.location.href = ""; } /** * 第二種方案 * */ var arr = [1,2,3,4]; var result = []; if(arr.length ===0 ){ arr=result; result = []; } var num = arr.splice(Math.floor(Math.random()*arr.length),1); result = num.concat(result); alert(result[0]); var luckyNum = result[0]; //alert(luckyNum); if(luckyNum==1){ window.location.href = ""; }else if(luckyNum==2){ window.location.href = ""; }else if(luckyNum==3){ window.location.href = ""; }else if(luckyNum==4){ window.location.href = ""; } /** * 第三種方案 */ var count=4; var originalArray=new Array;//原數組 //給原數組originalArray賦值 for (var i=0;i<count;i++){ originalArray[i]=i+1; } originalArray.sort(function(){ return 0.5 - Math.random(); }); for (var i=0;i<count;i++){ var luckyNum = originalArray[i] alert(luckyNum); if(luckyNum === 1){ window.location.href = ""; return; }else if(luckyNum === 2){ window.location.href = ""; return; }else if(luckyNum === 3){ window.location.href = ""; return; }else if(luckyNum === 4){ window.location.href = ""; return; } } /** * 第四種方案 */ var luckyNum = randUnique(1,4,1); alert(luckyNum); if(luckyNum == 1){ window.location.href = ""; }else if(luckyNum == 2){ window.location.href = ""; }else if(luckyNum == 3){ window.location.href = ""; }else if(luckyNum == 4){ window.location.href = ""; } /** 第五種方案(可解決前后兩次進入同一個頁面問題) */ var changeNum = Math.ceil(Math.random()*2); //alert("changeNum="+changeNum); if (changeNum == 1){ var arr = [1,2]; var skipNum = arr.splice(Math.floor(Math.random()*arr.length),1); //alert("skipNum="+skipNum); if(skipNum==1){ window.location.href = ""; }else if(skipNum==2){ window.location.href = ""; } } else if (changeNum == 2){ var arr = [3,4]; var skipNum = arr.splice(Math.floor(Math.random()*arr.length),1); //alert("skipNum="+skipNum); if(skipNum==3){ window.location.href = ""; }else if(skipNum==4){ window.location.href = ""; } } /* *第六種方案(可解決前后兩次進入同一個頁面) */ var firstArr = [ 1, 2 ]; var secondArr = [ 3, 4 ]; var skipNum = firstArr.splice(Math.floor(Math.random() * firstArr.length), 1); // alert(skipNum); if (skipNum == globalNum) { skipNum = secondArr.splice( Math.floor(Math.random() * secondArr.length), 1); } globalNum = skipNum; window.sessionStorage.setItem("skipNum", skipNum); if (skipNum == 1) { window.location.href = ""; } else if (skipNum == 2) { window.location.href = ""; } else if (skipNum == 3) { window.location.href = ""; } else if (skipNum == 4) { window.location.href = ""; } }) /* *第七種方案 */ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>歲末年初跳轉頁</title> </head> <body> 正在為您跳轉活動頁面，請稍候。。。 <script> var arr = new Array( "https://www.baidu.com/", "http://www.meishij.net/", "https://www.taobao.com/?spm=a1z0i.1000798.1581860521.1.YrC8PE", ); window.location.href = arr[Math.floor(Math.random() * arr.length)]; </script> </body> </html> //封裝方法 /** * 獲取不重復隨機數 * @param integer start 隨機數最小值 * @param integer end 隨機數最大值 * @param integer size 隨機數獲取數量 最小為1，默認1 * @return integer|array 如 1或者[2,4,7,9] */ function randUnique(start, end, size){ // 全部隨機數值 var allNums = new Array; // 判斷獲取隨機數個數 size = size ? (size > end - start ? end - start : size) : 1; // 生成隨機數值區間數組 for (var i = start, k = 0; i <= end; i++, k++) { allNums[k] = i; } // 打撒數組排序 allNums.sort(function(){ return 0.5 - Math.random(); }); // 獲取數組從第一個開始到指定個數的下標區間 return allNums.slice(0, size); }
轉自：https://blog.csdn.net/Milogenius/article/details/78942469
==================================================================
我用的第7種方法