글 작성자: 써니루루
다이아몬드형 문자열이 뭐냐 -_ -;;

            ♡
         ♡♡♡
      ♡♡♡♡♡
   ♡♡♡♡♡♡♡
♡♡♡♡♡♡♡♡♡
   ♡♡♡♡♡♡♡
      ♡♡♡♡♡
         ♡♡♡
            ♡

뭐 요래 출력하는 문자열이다 -ㅁ-;;


암튼 이런 소스를 만들기 위해서

입력받는 수는 홀수여야 하는 조건이 있다.
(만약 짝수면 +1을 해서 홀수로 만들면 되지만..)

그리고 양수여야 한다.

이것을 계산하기 위해서는 반을 잘라서 보면 되는데
지정된 수까지 증가할 때 까지는 왼쪽의 공백이 감소하다가
그 이후로는 공백의 수가 증가한다.

이는 Math.abs() 함수를 이용하면 되지만 abs 함수를 만들어서 처리했다.

아래 예제를 참조 하시길 ^ ^

<!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>
    <title> 다이아몬드 수열 +ㅁ +;</title>
   
    <script type="text/javascript">
    <!--//
    /*
     * 입력 받는 수까지의 짝수만 출력하는 함수
     * date : 2007-07-03
     * author : 김선우
     */
    function getDiaStr()
    {
        // 변수 선언
        var input = 0;  // 입력값
        var out = '';   // 출력값
       
        var div = 0;    // 몫
        var blk = 0;    // 공백의 갯수
        var cnt = 0;    // 출력할 문자열의 갯수
       
        // 입력
        input = parseInt(prompt("숫자 몇까지 출력할까요? (양수만) : ", "5"));
       
        // 음수면 양수로 변환
        input = abs(input);
       
        // 짝수가 입력되면 1을 더해 홀수로 만들어 준다.
        if (input % 2 == 0)
            input += 1;
           
        // 몫 계산
        div = (input - 1) / 2;
       
        for (var i = 0 ; i < input ; i++)
        {
            // 공백 갯수 계산
            blk = abs(div - i);
           
            // 별 갯수 계산
            cnt = input - blk * 2;
           
            out += str_repeat("&nbsp;&nbsp;&nbsp;&nbsp;", blk)
                + str_repeat("♡", cnt)
                + "\r\n<br />";
        }

        printOut(out, "output");
        return true;
    }
   
    /*
     * 입력 받는 수까지의 짝수만 출력하는 함수
     * date : 2007-07-03
     * author : 김선우
     */
    function str_repeat(str, cnt)
    {
        var out = "";
       
        for(var i = 0; i < cnt; i++)
            out += str;
       
        return out;
    }
   
    /*
     * 절대값을 반환하는 함수
     * date : 2007-07-03
     * author : 김선우
     *
     * param 1 : input - 입력받는 수
     */
    function abs(input)
    {
        if(isNaN(input))
            return;
       
        return (input < 0) ?
            0 - input:
            input;
    }
   
    /*
     * 특정 영역에 출력하는 함수
     * date : 2007-07-03
     * author : 김선우
     *
     * param 1 : str - 출력할 문자열
     * param 2 : target - 출력할 영역의 ID 값
     */
    function printOut(str, target)
    {
        document.getElementById(target).innerHTML = str;
        return true;
    }
    //-->
    </script>
</head>
<body>

<input type="button" value=" 하트 ♡ 보기 :) " onclick="javascript:void(getDiaStr());" />

<!-- 출력할 영역 ID:output -->
<div id="output"></div>

</body>
</html>

티스토리툴바