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