[JS] N명이 보고 있어요! 랜덤 함수 및 setTimeOut 사용하기

자바스크립트 랜덤 함수 및  setTimeOut 사용하기

See the Pen Untitled by Give J (@Give-J) on CodePen.

 

🩸이슈 발생

랜덤이지만 특정 규칙에 의해 숫자(인원수)가 변경되어야 했다.

1.  인원수 랜덤 (단, 범위 지정)

2. 변경되는 간격 랜덤 (단, 7초~15초 사이)

3. 시간대에 따라 다른 인원수 범위

 

728x90

 

---

🩹이슈 해결

1. HTML

<div id='web-only'>
    <div class="fix_box" style="z-index: 9999;">
        <div class="viewElement">
            <div class="view_text">
                <div class="flex">
                    <div class="t">지금
                        <div class="view_item t">
                            <div id="view2" class="">31</div>
                        </div>
                    명이 보고 있어요!</span>
                    </div>
                </div>
            </div>
            <div class="view_close">
                <div class="line line1"></div>
                <div class="line line2"></div>
            </div>
        </div>
    </div>
</div>

2. CSS

#web-only .fix_box{
    position: fixed;
    bottom: 40px;
    left: 160px;
    width: 389px;
    height: 80px;
    margin-bottom: 80px;

}

#web-only .fix_box .viewElement {
    background: rgba(0,0,0,.6);
    border-radius: 12px;
    height: 80px;
}


/* txt */
#web-only .fix_box .viewElement .view_text{
    text-align: center;
    padding: 28px;
}

#web-only .fix_box .viewElement .view_text .flex .t {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 100%;
    display: inline-block;
}


#web-only .fix_box .viewElement .view_text .flex .view_item {
    width: 2.5em;
}


#web-only .fix_box .viewElement .view_text .flex .view_item #view2 {
    top: 50%;
    transform: translateY(-50%);
    color: #FC7979;
    font-size: 1em;
    letter-spacing: 0.9rem;
    text-indent: 0.6rem;
    line-height: 0rem;
}

#web-only .fix_box .viewElement .view_close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-right: 5px;
}

#web-only .fix_box .viewElement .view_close .line.line1 {
    transform: rotate(-45deg);
}

#web-only .fix_box .viewElement .view_close .line.line2 {
    transform: rotate(45deg);
}

#web-only .fix_box .viewElement .view_close .line {
    width: 1rem;
    height: 0.5px;
    background: #fff;
    position: absolute;
}

3. JavaScript

// View 인원수 표기	
function updateViewElement(){

    var d = document.getElementById("view2");
    var u = new Date().getHours();

    // 초기값 
    var initialValue = 0;

    // 현재 시간대별 초기값 지정
    if (u >= 0 && u <= 6) {
      initialValue = 12;

    } else if (u >= 7 && u <= 12) {
      initialValue = 20;

    } else if (u >= 13 && u <= 18) {
      initialValue = 31;

    } else if (u >= 19 && u <= 23) {
      initialValue = 32;
    }

    // 초기값 설정
    d.innerText = initialValue; 

    // 최대값 설정 (초기값 + 10)
    var maxValue = initialValue + 10;

    // 랜덤한 간격(초) 범위 지정 (7초~15초)
    var randomInterval = Math.floor(Math.random() * (15000 - 7000 + 1)) + 7000;


    function updateValue() {

        var currentValue = Number(d.innerText);

         // 랜덤하게 초기값에서 최대값 사이의 숫자 선택
        var randomNum = Math.floor(Math.random() * (maxValue - initialValue + 1)) + initialValue;

        // 현재 값과 랜덤 숫자 사이의 차이를 계산하여 증가 또는 감소 결정
        var increment = randomNum - currentValue;

        // 화면에 값 업데이트
        d.innerText = randomNum;

        // 랜덤한 간격으로 다음 실행 예약
        randomInterval = Math.floor(Math.random() * (15000 - 7000 + 1)) + 7000;
        setTimeout(updateValue, randomInterval);
    }

	updateValue(); 

}

// 페이지 로드 시 한 번 초기 호출
updateViewElement();


// fix_box 닫기
$(".view_close").click(function(){
	$('.fix_box').fadeOut();
});