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