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种方法