미리보기
추첨 중...
52%당첨!
5
2
%
내 쿠폰 확인하기
HTML
<div class="random_wrap">
<div class="txt">
<div class="ing"><strong>추첨 중...</strong></div>
<div class="result"><strong><span id="countR">12%</span>당첨!</strong></div>
</div>
<div class="num">
<span id="count1">1</span>
<span id="count2">2</span>
<span id="cUnit">%</span>
</div>
<div class="util result">
<strong>내 쿠폰 확인하기</strong>
</div>
</div>
JavaScript
<script type="text/javascript">
$(document).ready(function(){
var couponNum1 = 5 // 실제 당첨 10의 자리 수
, couponNum2 = 2 // 실제 당첨 1의 자리 수
, loadingT = 2000 // 쿠폰 추첨 중인 시간
, couponUnit = ['!','@','#','$','%','^','&','*']
, unitArr = 0;
// ing...
var randomUnit = setInterval(function(){
$('#cUnit').text(couponUnit[unitArr++]);
if(unitArr >= couponUnit.length) unitArr = 0;
},60);
var randomNum1 = setInterval(function(){$('#count1').text(parseInt(Math.random() * 10))},60);
var randomNum2 = setInterval(function(){$('#count2').text(parseInt(Math.random() * 10))},60);
// result
setTimeout(function(){
clearInterval(randomUnit);
$('#cUnit').text('%');
},loadingT + 540);
setTimeout(function(){
clearInterval(randomNum2);
$('#count2').text(couponNum2);
},loadingT + 1080);
setTimeout(function(){
clearInterval(randomNum1);
$('#count1').text(couponNum1);
$('#countR').text(couponNum1.toString() + couponNum2.toString() + '%');
$('.random_wrap').addClass('end');
},loadingT + 1620);
});
</script>
JavaScript 슬롯머신 효과 구현
코드는 간단합니다.
"결과 화면"과 "진행중 화면"을 시간차( setTimeout )를 둬서 보여주고 숨기는 정도이고
랜덤함수( Math.random() )를 사용하여 숫자를 돌렸습니다!
clearInterval, Javascript, JQuery, Math.random(), setTimeout, Slot, 랜덤, 슬롯, 슬롯머신, 이벤트, 슬롯머신 이벤트, Slot Machine
반응형
'Programming > JavaScript' 카테고리의 다른 글
[amCharts.js] 커서 툴팁 구현 (0) | 2023.03.02 |
---|---|
[amCharts.js] 한국지도 커스텀 (0) | 2023.02.24 |
[JavaScript / jQuery] 룰렛 이벤트 구현 (0) | 2022.12.15 |
Puzzle Drag (0) | 2021.01.14 |
Flower Shower (0) | 2021.01.14 |
댓글