⚡ 룰렛 페이지 제작
<body> <form id="frm"> <input type="hidden" name="result" id="result" value=""> <input type="hidden" name="mname" value="홍길동"> <input type="hidden" name="mid" value="hong"> <section class="outline" id="outline"> <div class="roule_bk" id="roule_bk"> <img src="./image/rullet_back.png"> </div> <div class="gamepan"> <span class="gamepin"><img src="./image/rullet_pin.png"></span> <span class="gamebtn" id="gamebtn"><img src="./image/rullet_btn.png"></span> <span class="gameboard" id="gameboard"><img src="./image/rullet_board.png"></span> </div> </section> <input type="button" value="게임응모완료" id="btn"> </form> </body>
var data = ["500포인트","5000포인트","꽝","3000포인트","2000포인트","1000포인트"]; var count = 3; //기회 count $(function(){ var arr = new Array(); $rd = 0; $("#gamebtn").click(function(){ if(count <= 0){ alert("해당 룰렛게임은 총 3회만 진행하실 수 있습니다."); }else{ var $node = 0; //당첨결과 //룰렛 당첨에대한 범위 설정 - 1~360 범위 $random = Math.ceil(Math.random()*360); if($random>=5 && $random<=56){ $node = 0; }else if($random>=66 && $random<=116){ $node = 1; }else if($random>=126 && $random<=176){ $node = 2; }else if($random>=186 && $random<=236){ $node = 3; }else if($random>=246 && $random<=296){ $node = 4; }else if($random>306 && $random<360){ $node = 5; }else{ $node = 2; //해당각도 아닌값은 모두 꽝처리 => pc값 무시하고 직접 그냥 넣어줌 $random = 154; } var $game = $random + $.fn.random(); $("#gameboard").css("transform","rotate("+ $game +"deg)"); arr.push(data[$node]) $("#result").val(arr); } count--; }) //deg 누적 $.fn.random = function(){ $rd = $rd + 1800; //5바퀴 기본으로 돌고 당첨 위치로 돌아감 return $rd; } //결과 제출(backend에게 전달) $("#btn").click(function(){ if($("#result").val() != ""){ $("#frm").attr("method","POST"); $("#frm").attr("action","./gameok.do"); $("#frm").submit(); }else{ alert("룰렛을 한번 이상 돌려주세요") } }) })
당첨에대한 범위 설정
5~56 : 500포인트
66~116 : 5000포인트
126~176 : 꽝
186~236 : 3000포인트
246~296 : 2000포인트
306~360 : 1000포인트
=>나머진 다 꽝처리
=> 선생님의 폭주 🤷♂️ 진짜 data에 저장되게 해보기 : https://dev-eunse.tistory.com/144
👀 jquery - 확장형함수
//javascript
function aaa(){
random();
}
function random(){
console.log('ddd');
}
🔽 해당 문법을 jquery에서는 이렇게 사용
$.fn.함수명 : 확장형 함수 ( fn : funtion 줄임말 )
=> $. 문법은 jquery 1점대 문법 -> 예전버전을 쓰는 경우도 많기 때문에 아예 둘다 적용되는 해당 방식을 사용하는게 좋다...
$(function(){
$("#gamebtn").click(function(){
$.fn.random();
})
$.fn.random = function(){ //확장함수
console.log('ddd')
}
})
👀 html에 직접 입력 X => js로 form 처리하기
-> 보안을 위해 해당 방법으로 숨겨서 처리하는게 좋다
- javascript
document.getElementById("frm").method = "POST";
document.getElementById("frm").action = "./gameok.do";
document.getElementById("frm").submit();
- jquery
$("#btn").click(function(){
$("#frm").attr("method","POST");
$("#frm").attr("action","./gameok.do");
$("#frm").submit();
})
'CLASS > JQUERY' 카테고리의 다른 글
| jquery ui (0) | 2024.06.20 |
|---|---|
| #5 / 회원가입 data mysql로 전달 (0) | 2024.06.14 |
| #3-2 / backend-data(배열) ▶ jquery를 이용한 배열 출력 (1) | 2024.06.12 |
| #3-1 / jquery이용한 form + submit (0) | 2024.06.12 |
| #2 / jquery checkbox (0) | 2024.06.12 |