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