如何随机运行3个javascript函数中的1个？

Question

I want to show a random image to a page visitor, then only show that same image to the same visitor until the cookie expires.

Everything works properly but I'm stuck on the initialization.

Basically, if there is no cookie set, I need to run 1 of 3 functions randomly. How would I go about choosing the one of 3 functions at random and running it?

$(document).ready(function() {      
var cookie = readCookie("boatColor");
if (!cookie) {
  console.log('Run one of 3 Functions Randomly');
  } else if (cookie == "boatRed") {
    showRedBoat();
  } else if (cookie == "boatWhite") {
    showWhiteBoat();
  } else if (cookie == "boatBlue") {
    showBlueBoat();
  }
}); 


function showRedBoat() {
    var newSrc = ""; 
      var myText = "";
    newSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/copeland_boat_red.jpg"; 
        myText = "<h3>You've got the Red Boat!</h3>";
    theImage.src = newSrc; 
    theDesc.innerHTML = myText;
    createCookie("boatColor", 'boatRed', 0.00034722222);
}

function showWhiteBoat() {
    var newSrc = ""; 
      var myText = "";
    newSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/copeland_boat_white.jpg"; 
        myText = "<h3>You've got the White Boat!</h3>";
    theImage.src = newSrc; 
    theDesc.innerHTML = myText;
    createCookie("boatColor", 'boatWhite', 0.00034722222);
}

function showBlueBoat() {
    var newSrc = ""; 
      var myText = "";
    newSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/copeland_boat_blue.jpg"; 
        myText = "<h3>You've got the Blue Boat!</h3>";
    theImage.src = newSrc; 
    theDesc.innerHTML = myText;
    createCookie("boatColor", 'boatBlue', 0.00034722222);
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;

}

Codepen Link: https://codepen.io/nolaandy/pen/awgoQM

Answer 1

您可以使用new Date().getTime() % 3获得0到2之间的伪随机数。然后只需使用switch语句调用一个函数或另一个函数即可。

Answer 2

My solution is to generate a random number if there is no cookie set, then run one of three functions based on that number:

$(document).ready(function() {      
  var cookie = readCookie("boatColor");

  if (!cookie) {
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  var randomNumber = getRandomInt(0,2);

  if (randomNumber == 0) {
    showRedBoat();
    } else if (randomNumber == 1) {
  showWhiteBoat();
  } else if (randomNumber == 2) {
  showBlueBoat();
  }
      } else if (cookie == "boatRed") {
        showRedBoat();
      } else if (cookie == "boatWhite") {
        showWhiteBoat();
      } else if (cookie == "boatBlue") {
        showBlueBoat();
      }
});