JavaScript打开页面后自动随机跳转页面

最新推荐文章于 2024-05-28 11:48:13 发布
最新推荐文章于 2024-05-28 11:48:13 发布
阅读量9.3k 收藏 11
点赞数 5
分类专栏： # JavaScript 文章标签： javascript 需求 解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Milogenius/article/details/78942469
版权

这里写图片描述

这里写图片描述
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);  
    }
爱写Bug的麦洛
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html自动随机跳转网址,网页随机跳转代码
weixin_29577845的博客
06-02 6738
网页随机跳转代码zkx•2021 年 05 月 31 日Loading...```shell网页随机跳转var theAds = new Array("http://a.com","http://a.com","http://a.com","http://a.com","http://a.com");shu = theAds.length ;sx = parseInt(Math.random(...
JS实现打开页面，设置多个网址随机访问
总结前端开发中遇到的问题，分享前端知识
01-04 1506
setTimeout(()=>{ var arr = ["https://vant-contrib.gitee.io/vant/#/zh-CN/","https://element.eleme.cn/#/zh-CN/component/installation"]; window.location.href = arr[parseInt(Math.random()*arr.length)]; },1000)
web网页设计与开发：基于HTML+CSS+JavaScript简单的个人博客网页制作期末作业
最新发布
qq_365392777
05-28 550
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
实现HTML地址的随机调用
不二的博客
08-22 1448
提一个问题动态控制js的引用地址&lt;script src="a.html" language="JavaScript"&gt;&lt;/script&gt;,我想要实现 每次加载页面的时候src="a.html"的值是 Jquery实现方式： var arr = [a....z], random = Math.floor(Math.random() * 26) + 1;; $('&lt...
html自动随机跳转网址,网页制作页面跳转 怎么制作一个随机跳转页面的超链接?...
weixin_39603117的博客
06-02 2854
“网页设计如何从一个页面跳转到另一个页面”window.location.href = 'page2.html';html网页登录界面跳转设计在网页制作中如何实现不同页面之间的跳转在页面的开始位置加入一个书签，选择“插入”菜单下的“书签”命令，在弹出的对话框中输入书签的名字，比如“top”，单击“确定”，在页面开始就会出现一个书签标志。在页面的最后输入“返回顶端”，并选中，HTML网页设计:如何设...
html访问域名跳转,根据访问的域名跳转到指定目录的代码
weixin_33278819的博客
05-31 1447
今天也遇到这样的情况，开始设想根据访问的域名跳转到指定目录的代码，起初还以为不能实现。没有想到度娘不愧为度娘。下面贴出网络代码，以备后用。ASP代码：[code]‘取得HTTP输入的值并付值到HTOST中host=lcase(request.servervariables("HTTP_HOST"))‘开始条件跳转select CASE hostCASE "file1.admin-s.cn"‘ 如果...
仿QQ红包效果，自动生成二维码，扫码跳转红包页面
01-13
这里我们将深入探讨如何创建一个仿QQ红包的系统，包括自动生成二维码以及扫码后跳转到红包页面的功能。 首先，让我们从HTML（超文本标记语言）开始。HTML是网页内容的基础，用于构建网页结构。在仿QQ红包的场景中，...
程序天下:JavaScript实例自学手册
07-08
1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用...
《JavaScript实例精通》[源代码]
09-21
14_3.htm 浏览器检测后自动跳转相应界面。 14_4.htm 检测浏览器相应版本。 14_5.htm 页面停留时间1。 14_6.htm 页面停留时间2。 14_7.htm 检测浏览器类型并调用不同的背景音乐。 14_8.htm 将站点加入...
javaScript实例自学手册486例,附带目录可方便搜索
02-20
1.17 以频道模式打开页面.htm 1.18 自动识别网页类型.htm 1.19 在网页中动态添加Script脚本.htm 1.2 页面自动最大化.htm 1.20 用JavaScript随机修改页面的标题.htm 1.21 判断网页加载完毕.htm 1.22 嵌入网页...
JavaScript实例精通
01-11
14_3.htm 浏览器检测后自动跳转相应界面。 14_4.htm 检测浏览器相应版本。 14_5.htm 页面停留时间1。 14_6.htm 页面停留时间2。 14_7.htm 检测浏览器类型并调用不同的背景音乐。 14_8.htm 将站点加入...
JS实现网页上随机产生超链接地址的方法
11-23
本文实例讲述了JS实现网页上随机产生超链接地址的方法。分享给大家供大家参考，具体如下： 这是一个JavaScript的应用，每刷新一次页面，会自动更换一次链接，虽然不常用，不过对Javascript随机函数Math.random() 的使用将直到引导作用。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-math-rand-url-show-codes/ 具体代码如下： <html> <head> <title>在网页上随机产生超链接地址</title> [removed] <!-- ur
HTML网页跳转代码大全 网页自动跳转代码【分享】
热门推荐
vbn67667的博客
10-23 17万+
很多新手在学习网站建设的时候，不清楚也就是从一个，下面IT备忘录婷婷小编就给大家分享一份比较全面的网页自动跳转代码大全给大家，欢迎大家采纳！
JavaScript中实现页面跳转的七种方法
rr20060119的博客
10-19 3万+
【代码】 JavaScript中实现页面跳转的七种方法。
js实现页面跳转以及返回上一页
weixin_68250871的博客
09-27 746
js实现页面跳转以及返回上一页
轻搭云使用JS触发事件实现随机跳转页面
weixin_43662325的博客
01-03 523
点击按钮，执行JS，然后随机跳转页面，完美实现客户需求。
js随机域名跳转，适用于多种途径
avbobok的博客
12-18 1334
<script> function changeurl(){ var arr = new Array( "https://www.", "https://www.", ); window.location.href = arr[Math.floor(Math.random() * arr.length)]; } changeurl(); </script> 更多URL：其它人的JS跳转方式
js随机跳转网址
bollyrui的个人学习笔记
05-07 8万+
setTimeout(function(){    var arr=['http://3g.022gc.net/#xwy','http://3g.029gc.net/#xwy','http://3g.gt120.net/#xwy'];   window.location.href=arr[parseInt(Math.random()*arr.length)];   },100);
javascript跳转页面
07-28
回答: JavaScript可以通过多种方式实现页面跳转。其中一种方式是使用window.location.href属性来改变当前页面的URL，从而实现跳转。例如，可以使用以下代码将页面跳转到b.html页面：\[1\]\[2\] ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值