JAVASCRIPT ) 숫자판 예제

 

<style>
    * { margin: 0; padding: 0; }
    h1 {font-size: 64px; text-align: center; margin-bottom: 10px;}
    .wrap {text-align: -webkit-center;}
    .inputA {
        width: 200px; height: 60px; 
        background-color: #1d2a35; 
        border: 0; border-radius: 8px; 
        color: white; font-size: 18px;
        padding: 10px;
    }
    button {
        width: 60px; height: 60px; 
        background-color: #04AA6D; 
        border: 0; border-radius: 8px; 
        color: white; font-size: 18px;
    }
    .dBWrap {
    	width: 245px;
        background: #1d2a35;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    }
    .dB {
        width: 102px; height: 250px; margin:10px; 
    }
    .bar { bacground-color: #04AA6D; border: 1px dashed #005b39; 
        float: left;  margin-bottom: 1px;
    }
    .bSH { width: 100px; height: 10px;}
    .bSV { width: 10px; height: 100px; }
    .fR { float: right; }
</style>
<h1>DIGIT!</h1>
<div class="wrap">
	<div class="dBWrap">
        <div class="dB">
            <div id="box1" class="bar bSH"></div>
            <div id="box2" class="bar bSV"></div>
            <div id="box3" class="bar bSV fR"></div>
            <div id="box4" class="bar bSH"></div>
            <div id="box5" class="bar bSV"></div>
            <div id="box6" class="bar bSV fR"></div>
            <div id="box7" class="bar bSH"></div>
        </div>
        <div class="dB">
            <div id="box8" class="bar bSH"></div>
            <div id="box9" class="bar bSV"></div>
            <div id="box10" class="bar bSV fR"></div>
            <div id="box11" class="bar bSH"></div>
            <div id="box12" class="bar bSV"></div>
            <div id="box13" class="bar bSV fR"></div>
            <div id="box14" class="bar bSH"></div>
        </div>
    </div>
    <div>
        <input id="inputA" class="inputA" type="number" placeholder="0 ~ 99">
        <button id="btn">click!</button>
    </div>
</div>



<script>
    document.getElementById("btn").onclick = function(){
    	let box1 = document.getElementById("box1");
        let box2 = document.getElementById("box2");
        let box3 = document.getElementById("box3");
        let box4 = document.getElementById("box4");
        let box5 = document.getElementById("box5");
        let box6 = document.getElementById("box6");
        let box7 = document.getElementById("box7");
        let box8 = document.getElementById("box8");
        let box9 = document.getElementById("box9");
        let box10 = document.getElementById("box10");
        let box11 = document.getElementById("box11");
        let box12 = document.getElementById("box12");
        let box13 = document.getElementById("box13");
        let box14 = document.getElementById("box14");
        
        let boxArrayL = [box1, box2, box3, box4, box5, box6, box7];
        let boxArrayR = [box8, box9, box10, box11, box12, box13, box14];
        
    	let digit = [
            [1,1,1,0,1,1,1],
            [0,0,1,0,0,1,0],
            [1,0,1,1,1,0,1],
            [1,0,1,1,0,1,1],
            [0,1,1,1,0,1,0],
            [1,1,0,1,0,1,1],
            [0,0,1,1,1,1,1],
            [1,1,1,0,0,1,0],
            [1,1,1,1,1,1,1],
            [1,1,1,1,0,1,0]
        ]
        
    	let inputNumber = document.getElementById("inputA").value;
        

        if(inputNumber > 99){
        	alert("99이하의 수를 입력하세요!");
        } else if (inputNumber < 10){
        	// 왼쪽은 무조건 0
        	for(let i=0; i<digit[0].length; i++){
				boxArrayL[i].style = "background-color: #1d2a35;";
            }
            
            //오른쪽
        	for(let j=0; j<digit[inputNumber].length; j++){
                if(digit[inputNumber][j] == 1 ){
                    boxArrayR[j].style = "background-color: #04AA6D;";
                } else {
                    boxArrayR[j].style = "background-color: #1d2a35;";
                }
            }
        } else {
        	//두자릿수 value값을 쪼개기
            let numberLeft = Number(inputNumber.substr(0, 1));
            let numberRight = Number(inputNumber.substr(1, 2));

            // 왼쪽
            for(let i=0; i<digit[numberLeft].length; i++){
                if(digit[numberLeft][i] == 1 ){
                    boxArrayL[i].style = "background-color: #04AA6D;";
                } else {
                    boxArrayL[i].style = "background-color: #1d2a35;";
                }
            }

            // 오른쪽
            for(let j=0; j<digit[numberRight].length; j++){
                if(digit[numberRight][j] == 1 ){
                    boxArrayR[j].style = "background-color: #04AA6D;";
                } else {
                    boxArrayR[j].style = "background-color: #1d2a35;";
                }
            }
        }
        
    }
</script>