코딩헤딩

[java script] 랜덤 12자리 문자열 생성 (jQuery코드 추가) 본문

javascript

[java script] 랜덤 12자리 문자열 생성 (jQuery코드 추가)

멈머이 2024. 12. 15. 21:17
728x90

12자리의 랜덤한 문자열 생성 후 input 태그의 value로 담기.

결과

1) html코드

<body>
    <h1>랜덤 12자리 문자열 생성</h1>
    <input type="text" id="randomInput" readonly>
</body>

 

2) 자바스크립트 코드

function generateRandomString(length) {
    // 문자열에 포함 될 문자.
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    // 생성될 문자열 변수 초기화.
    let result = '';
	
    // 선언해놓은 문자열 중 랜덤한 문자 조합.
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        result += characters[randomIndex];
    }
	
    // 결과 return
    return result;
}

// return받은 문자를 input에 넣기.
function setRandomStringToInput() {
    const randomString = generateRandomString(12);
    document.getElementById('randomInput').value = randomString;
}

// 페이지가 로드될 때 랜덤 문자열을 생성하여 input에 설정
window.onload = setRandomStringToInput;

 

2-1) jQuery코드

// jQuery 사용을 위해 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
$(document).ready(function () {
    function generateRandomString(length) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';

        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            result += characters[randomIndex];
        }

        return result;
    }

    const randomString = generateRandomString(12);
    $('#randomInput').val(randomString);
});

 

728x90

'javascript' 카테고리의 다른 글

[java script + CSS] 토글 드롭다운  (0) 2024.01.22
[반응형 웹] 부드럽게 글자이동 @keyframes  (1) 2024.01.17
랜덤 로또번호 뽑기 ( setInterval() )  (3) 2023.10.05
javascript를 html으로 출력하기  (0) 2023.10.03
랜덤으로 로또 번호 생성하기 ( math.random() )  (0) 2023.10.02
'javascript' Related Articles more