JavaScript打印杨辉三角

1、什么是杨辉三角？

1 
1 1 
1 2 1 
1 3 3 1 
1 4 6 4 1 

上面就是一个简单的杨辉三角的例子

观察一下，

第n行有n个元素，

第n行的第一个元素和第n个元素为1，

其他元素，假设为第n行第m个元素，则其值为第n-1行第m-1个元素+第n-1行第m个元素。

 

2、附上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>杨辉三角</title>

    <style type="text/css">
        
        div#container{
            width: 300px;
            margin: 0 auto;
        }

    </style>
</head>
<body>

<div id="container">
    
        <div>
        <input type="text" placeholder="输入行数" id="input"/>
    </div>

    <div>
        <br/>
        <button id="post" >打印杨辉三角</button>
    </div>
</div>

    <script type="text/javascript">
        
        var input = document.getElementById("input");
        var submit = document.getElementById("post");

        submit.onclick = function(){

            var inputvValue = input.value;
            var lineNumber = parseInt(inputvValue);

            if(!lineNumber){
                alert("您的输入是"+inputvValue+",有误,请重新输入！");
            }
            else{

                //新建数组，放置杨辉三角
                var array = new Array(lineNumber);

                for(var k=0;k<lineNumber;k++){
                    array[k] = new Array();
                }

                var type = "";

                for(var i=0;i<lineNumber;i++){

                    for(var j=0;j<=i;j++){

                        //每一行首尾两个元素赋值为1
                        if(0 == j || i == j){
                            array[i][j] = 1;
                            type+=array[i][j]+" ";
                        }
                        //其他元素为上一行前一列元素上一行这一列元素
                        else {
                            array[i][j] = array[i-1][j-1] + array[i-1][j];

                            type+=array[i][j]+" ";
                        }

                    }
                        type+="<br/>";
                }

                var container = document.getElementById("container");

                container.innerHTML+=type;

            }

        };

    </script>
</body>
</html>

 

3、额外发现的问题

上面代码的click事件只能被触发一次，想再次打印需要刷新，是因为使用innerHtml，使得html被重新加载，里面绑定的事件不见了。

 

解决方法是不用innerHtml,而是生成节点插入

 

            var text = document.createTextNode(type);
            container.appendChild(text);

 

而代码没有修改是因为如果生成节点的话，"<br/>"会被当做文本插入，而不会换行，所以不采用这种方法。

但是呢，下一次碰到采用innerHtml且click事件只能被触发一次时，就能用上述这种方法了。

 

 

本文由作者原创，有什么错误欢迎指教，转载请注明出处http://www.cnblogs.com/kerita/p/5280868.html

posted @ 2016-03-15 19:50  Kerita  阅读(3814)  评论(0)  编辑  收藏  举报