作者:手机用户2602933165 | 来源:互联网 | 2023-05-17 17:25
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+="
";
}
var container = document.getElementById("container");
container.innerHTML+=type;
}
};
script>
body>
html>
3、额外发现的问题
上面代码的click事件只能被触发一次,想再次打印需要刷新,是因为使用innerHtml,使得html被重新加载,里面绑定的事件不见了。
解决方法是不用innerHtml,而是生成节点插入
var text = document.createTextNode(type);
container.appendChild(text);
而代码没有修改是因为如果生成节点的话,"
"会被当做文本插入,而不会换行,所以不采用这种方法。
但是呢,下一次碰到采用innerHtml且click事件只能被触发一次时,就能用上述这种方法了。
本文由作者原创,有什么错误欢迎指教,转载请注明出处http://www.cnblogs.com/kerita/p/5280868.html