Question

我有一个充满链接的json文件，我想制作一个随机按钮，重定向到该json文件中列出的一些链接

json文件示例：

{"pages":[
      {
        "url": "https://www.google.com/"
       },
 {
        "url": "https://stackoverflow.com/"
       },
 {
        "url": "https://www.twitter.com/"
       },
 {
        "url": "https://www.facebook.com/"
       },
  ]
}

Answer 1

您可以使用Math.random()选择介于0和数组长度之间的随机数。然后Math.floor()将其转换为整数。

然后，此值可用作从数组中选择随机对象的索引。

一旦你有location.href或location.replace()可以用来将页面重定向到随机选择的网址。代码示例如下：

var json = {
  "pages": [{
      "url": "https://www.google.com/"
    },
    {
      "url": "https://stackoverflow.com/"
    },
    {
      "url": "https://www.twitter.com/"
    },
    {
      "url": "https://www.facebook.com/"
    },
  ]
};

var index = Math.floor(Math.random() * json.pages.length);
var url = json.pages[index].url;
console.log("Redirecting to: " + url);
location.href = url;

从服务器json文件中获取：

$('button').click(function() {
  $.getJSON("/index.json", function(json) {
    console.log("Data retrieved: " + json);
    var index = Math.floor(Math.random() * json.pages.length);
    var url = json.pages[index].url;
    console.log("Redirecting to: " + url);
    location.href = url;
  });
});

Answer 2

使用带有Math.floor（）函数的javascript Math.random（）函数生成任意范围之间的随机数。

在你的情况下，你的数组大小为0。使用上述函数生成随机数，然后选择该索引并在按钮单击时重定向到该链接。

https://www.w3schools.com/jsref/jsref_random.asp

Answer 3

HTML

<button id="randomLinkButton">
Random Page
</button>

的JavaScript

function getRandomUrl(){

  // define your source JSON data file URL
  var url = 'http://server/file',
        def = $.Deferred();

    $.getJSON( url ).done(function( data ){
    // received

    // get random index
    var randomIndex = Math.floor(Math.random() * data.pages.length);

    // resolve with random URL
    def.resolve( data.pages[ randomIndex ].url );

  }).fail( function( error ){

    // failed
    def.reject( error );
  });

  return def;
}

$(document).ready( function(){
  getRandomUrl().done(function(url){

    // button click code
    var buttonClickCode = "window.location.href = '" + url + "'";

    // button click handler
    $('#randomLinkButton').attr('onClick', buttonClickCode)

  }).fail(function(){

    // failed
  });

});

处理JsFiddle demo

中显示的按钮的点击处理程序的更好方法

由于被阻止
，重定向页面将在JsFiddle中显示为空白

从json文件重定向到随机URL

3 个答案: