이미지를 무작위로 표시하는 것은 매우 널리 사용되는 기술입니다. 예를 들어, 임의의 배너가 표시됩니다. 웹 사이트에 들어가면 해당 배너가 항상 다르거나 항상 다른 내용의 팁이 있습니다. 인터넷을 탐색할 때 이러한 예를 자주 찾을 수 있습니다. 이 기술을 사용하면 특정 공간에 더 많은 콘텐츠를 넣을 수 있을 뿐만 아니라 사람들에게 자주 업데이트되는 듯한 착각을 줄 수도 있습니다.
얼마나 신나요? 사실 HTML과 자바스크립트에 대한 기본적인 지식만 조금 있으면 모든 것이 너무나 간단합니다. 나를 따라와서 그녀의 무작위 비밀을 살펴보자.
간단한 예부터 시작해 보겠습니다. 일반적으로 <img src="picture">를 사용하여 페이지에 그림을 추가합니다. 3개의 서로 다른 그림을 무작위로 표시하려면 먼저 이 코드를 약간 수정해야 합니다.
다음은 인용된 부분입니다.
<스크립트 언어=javascript></script>
그런 다음 document.write("")를 사용하여 이 태그에 <img src="picture">를 넣으면 다음과 같습니다.
document.write("<img src=이미지>")
이제 가장 중요한 단락을 마무리하겠습니다.
인용문은 다음과 같습니다.
id=Math.round(Math.random()*2)+1
이런 식으로 1, 2, 3의 난수를 얻게 됩니다. 표시하고 싶은 사진의 이름을 1.gif, 2.gif, 3.gif로 바꾸세요, ok! 최종 코드는 다음과 같습니다.
인용문은 다음과 같습니다.
<스크립트 언어=자바스크립트>
id=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</script>
한번 해보세요, 좋지 않나요? 그러면 내 사진 각각이 하이퍼링크에 해당하면 어떻게 될까요?
1.gif, 2.gif, 3.gif 3개의 사진이 있고 해당 링크가 url1, url2, url3이라고 가정해 보겠습니다.
이미지와 링크 사이의 일대일 대응을 위해서는 다음과 같이 링크 주소를 배치할 배열 이미지를 설정해야 합니다.
다음은 참조 조각입니다.
var 이미지=새 배열(3)
이미지.길이=3
이미지[1]="url1"
이미지[2]="url2"
이미지[3]="url3"
이미지에 해당하는 링크를 얻으려면 imageurl=image[id] 배열도 정의해야 합니다.
원칙은 이렇습니다.
페이지를 읽을 때 난수를 취하는데, 이를 2, 즉 id=2라고 가정하면 위와 같이 페이지에 2.gif를 쉽게 표시할 수 있습니다. 그러면 imageurl=image[2] 및 image[2]="url2"를 볼 수 있습니다. 나머지는 쉽습니다. 전체 코드는 다음과 같습니다.
다음은 인용된 부분입니다.
<스크립트 언어=자바스크립트>
var 이미지=새 배열(3)
이미지.길이=3
이미지[1]="url1"
이미지[2]="url2"
이미지[3]="url3"
id=Math.round(Math.random()*2)+1
imageurl=이미지[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>
재인쇄: Seven Color Bird Design---pc-king