DIV를 랜덤하게 표시하기

자바 DIV를 랜덤하게 표시하기

페이지 정보

작성자 관리자 (49.♡.11.159) 조회 2,943회 작성일 21-08-24 23:20(마지막 글 수정: 2022년 06월 19일)

본문

자바스크립트를 이용해 div를 랜덤하게 표현하는 방법에 대해 기록형으로 정리 합니다.

출처는 ㅠㅠ 잘 모르겠습니다. (그냥 인터넷 이라고 해두겠습니다.)

[code]

<!--

PHP로 나타내기

출처: https://sir.kr/qa/6438

-->

<?php

$display = rand(1, 3);

<?php if ($display == 1) { ?><div class="001">내용001</div>

<?php } else if ($display == 2) { ?><div class="002">내용002</div>

<?php } else { ?><div class="003">내용003</div><?php } ?>

<!--

여러개 중 랜덤으로 1개만 나타낼때

아래와 같이 하면 1~4 중 1개만 결과값으로 나옵니다.

-->

window.onload=function() {

var E = document.getElementsByClassName("item");

var m = E.length;

var n = parseInt(Math.random()*m);

for (var i=m-1;i>=0;i--) {

var e = E[i];

e.style.display='none';

}

E[n].style.display='';

}

</script>

[/code]

4개를 랜덤 순서대로 보여주기

아래와 같이 하면 랜덤으로 4개가 모두 보입니다.

<head>에 입력할 내용

[code]

$(document).ready(function(){

var cards = $(".photographer");

for(var i = 0; i < cards.length; i++){

var target = Math.floor(Math.random() * cards.length -1) + 1;

var target2 = Math.floor(Math.random() * cards.length -1) +1;

cards.eq(target).before(cards.eq(target2));

};

});

</script>

[/code]

본문내용 div에 적용할 것

[code]

[/code]

댓글목록

등록된 댓글이 없습니다.