자바 스크립트 무작위 배경 이미지 변경 onload

Question

다른 크기의 배경 이미지가있는 페이지에 6 개의 ahref 상자가 있으며, 내가하고 싶은 것은 3 개의 임의 상자 bg 이미지 파일 확장자를 가져와 gif로 바꾸는 것입니다. 따라서 페이지가 새로 고침 될 때마다 3 개의 이미지가 다릅니다. 나는 위치를 무작위로 원하지만 URL을 변경하고 완전히 임의의 이미지를 변경하지 않아도 제어 할 수 있기 때문에이 작업을 수행하는 방법을 완전히 알지 못합니다.

Answer 1

에 추가하여 이미지를 얻기 위해 다른 확률 변수를 사용할 수 있도록 이미지를 명명 시도하려는 경우 각각의 아이

$("ul li:nth-child(randomNum)").css('background-image', 'url(http://url you want.com)') 

를 선택할 수 있습니다

(function (document) { 
    var boxes = document.getElementsByClassName('box'), 
     background = '', 
     index = 0; 

    // Convert the nodeList to an Array 
    boxes = Array.prototype.slice.call(boxes); 

    // Returns a random integer between min and max 
    // Using Math.round() will give you a non-uniform distribution! 
    function getRandomInt(min, max) { 
     return Math.floor(Math.random() * (max - min + 1) + min); 
    } 

    for (var i=0; i<3; i++) { 
     // Pick a random node 
     index = getRandomInt(1, boxes.length) - 1; 
     // Background 
     background = document.defaultView.getComputedStyle(boxes[index]) 
      .backgroundImage 
      .replace('.jpg', '.gif'); 
     boxes[index].style.cssText = "background-image:" + background; 
     // Remove that node so we don't get it again 
     boxes.splice(index, 1); 
    } 

}(document)); 

Here's a Fiddle to show it in action.

: 다음 0 nodeList.length 사이에 인덱스 하나를 선택 배열로 변환, 당신이 그들을 선택할 수있는 목록에서 임의의 3 개 노드를 얻으려면

Answer 2

var randomNum = Math.floor(Math.random() * 6) 

이렇게하면 0-5 사이의 임의의 숫자가 생성됩니다. 그래서 당신은 가서 당신이 임의의 이미지는 하나 당신이 url()