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

페이지 정보

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

본문

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

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


fe9e43041e24acadb48b2e5a166b2d4f_1629814424_7593.gif
 


 

[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개만 결과값으로 나옵니다.

-->

<script type="text/javascript">

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>


<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

[/code]

 


 

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

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


<head>에 입력할 내용 

[code]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

  $(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]

<div class='photographer'>이름1</div>

<div class='photographer'>이름2</div>

<div class='photographer'>이름3</div>

<div class='photographer'>이름4</div>

[/code]




댓글목록

등록된 댓글이 없습니다.

사이트안내 | 서비스 이용약관 | 개인정보 처리방침 |
마이링크 | 후원안내 | FAQ | Admin
TOP