ウェブ家の備忘録

ウェブデザイナーの備忘録

JavaScript : 九九を出力

式1

 シンプルな回答

<script>
    //初期値
    const xStart = 1, yStart = 1;
    const xEnd   = 9, yEnd   = 9;
    
    //処理
    const maxLen = String(xEnd*yEnd).length;
    let output = "";
    
    for(let x = xStart; x <= xEnd; x++){
    for(let y = yStart; y <= yEnd; y++){
        output += ".";
        
        let nowLen = String(x*y).length;      
        if(maxLen > nowLen){
            for(let i = nowLen; i < maxLen; i++){
                output += "_";
            }
        }
        
        output += x*y;
    }
    output += "<br>";
    }
    
    document.write(output);
</script>

出力1


._1._2._3._4._5._6._7._8._9
._2._4._6._8.10.12.14.16.18
._3._6._9.12.15.18.21.24.27
._4._8.12.16.20.24.28.32.36
._5.10.15.20.25.30.35.40.45
._6.12.18.24.30.36.42.48.54
._7.14.21.28.35.42.49.56.63
._8.16.24.32.40.48.56.64.72
._9.18.27.36.45.54.63.72.81


式2

 色々付け加えた物

<script>
    //初期値
    let [xStart,yStart] = [1,1];
    let [xEnd,yEnd]     = [9,9];
    
    
    //処理
    function numUse(num){
        return Math.abs(Math.floor(num));
    }
    xStart = numUse(xStart),yStart = numUse(yStart);
    xEnd   = numUse(xEnd)  ,yEnd   = numUse(yEnd)  ;
    
    const maxLen = String(xEnd*yEnd).length;
    let output = "";
    
    function numAlign(maxL,nowL){
        let returnTxt="";
        
        if(maxL > nowL){
            for(let i = nowL; i < maxL; i++){
                returnTxt += "_";
            }
        }
        
        return returnTxt;
    }
    
    for(let x = xStart; x <= xEnd; x++){
        output += numAlign( String(xEnd).length, String(x).length );
        output += x + "の段" + "|";
        for(let y = yStart; y <= yEnd; y++){
            if(y != yStart){output += ".";}
            
            let nowLen = String(x * y).length;
            output += numAlign(maxLen, nowLen);
            
            output += x * y;
        }
        output += "<br>";
    }
    
    document.write(output);
</script>

出力2


1の段:_1._2._3._4._5._6._7._8._9
2の段:_2._4._6._8.10.12.14.16.18
3の段:_3._6._9.12.15.18.21.24.27
4の段:_4._8.12.16.20.24.28.32.36
5の段:_5.10.15.20.25.30.35.40.45
6の段:_6.12.18.24.30.36.42.48.54
7の段:_7.14.21.28.35.42.49.56.63
8の段:_8.16.24.32.40.48.56.64.72
9の段:_9.18.27.36.45.54.63.72.81