16진수를 이용한 랜덤 컬러 픽커

아이디어 :

  1. 사용 언어 : (html / javascript)
  2. 버튼을 누를때마다 0 ~ 16777215(ffffff) 사이의 숫자 반환
  3. 10진수 -> 16진수로 변환
  4. 백그라운드 색상 변경

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>

<script type="text/javascript">
    //버튼을 눌렀을때 실행될 함수
    function changeBg() {
        var decimal = getRanNum();
        var hexNum = hex(decimal);
        var bg = document.getElementsByTagName("body")[0];
        bg.style.backgroundColor = "#" + hexNum; //배경색 변경
    }

    //랜덤 10진수 생성
    function getRanNum() {
        var number = Math.floor(Math.random() * 16777216); //0 ~ ffffff
        return number;
    }

    //10진수를 16진수로 변환
    function hex(number) {
        var abcHex = [ "a", "b", "c", "d", "e", "f" ];
        var result = "";
        while (number > 0) {
            var temp = number % 16;
            if (temp >= 10) {
                result += abcHex[temp - 10];
            } else {
                result += temp;
            }
            number = Math.floor(number / 16);
        }
        result = lpad(result); //16진수 자리수 6자리로 맞추기
        result = reverse(result); //거꾸로 저장된 16진수값 뒤집기
        return result;
    }

    //거꾸로 입력된 16진수 뒤집기
    function reverse(number) {
        var result = "";
        for (var i = number.length - 1; i >= 0; i--) {
            result += number.charAt(i);
        }
        return result;
    }

    //16진수값을 6자리로 맞춰주기
    function lpad(number) {
        var result = number;
        while (result.length < 6) {
            result += "0";
        }
        return result;
    }
</script>

</head>
<body>
    <button onclick="changeBg();">Change Color</button>
</body>
</html>

댓글

댓글 쓰기