1

我现在有一点问题，希望你们中的一个可以帮助我。我已经尝试了几件事，但我就是无法得到它。我正在尝试使用 JavaScript 打印一个星号三角形。该程序是询问用户的行数，然后是方向。我什至还没有开始制定方向，因为我无法让行开始工作。奇怪的是，我可以让它打印出对函数调用进行硬编码的三角形。

这是 JS 文件：

function myTriangle(){

var result = "";

var totalRows = document.getElementById('rows').value;
var direction = document.getElementById('UpOrDown').value;

for (var i = 1; i <= totalRows; i++){

    document.writeln("count");
for (var j = 1; j <= 1; j++)
    {
           result += "*";
    }

    result += "<br/>";
}
return result;
}

var answer = myTriangle();
document.getElementById('myDiv').innerHTML = answer;

这是 HTML 文件：

<!DOCTYPE html>
<head>
<title>Lab 2</title>
<script src="scripts.js", "div.js"></script>

</head>
<body>

<form name="myForm">
    <fieldset>
        <legend>Input Fields</legend>
    rows:      <input type="text" id="rows" /><br>
    direction: <input type="text" id="UpOrDown" /><br>
    press: <input type="button" value="GO!" id="myButton" 
    onclick="myTriangle();"/>
    </fieldset>
</form>

<div id="myDiv">

</div>  

</body>

输出将是这样的：

*
**
***
****
*****
4

4 回答 4

2

一般有四种三角形——

1.)*     2.) ***   3.)    *    4.) ***
   **        **          **         **
   ***       *          ***          *

代码 1 -

var ast = [],
i, j = 4;
for (i = 0; i < j; i++) {
 ast[i] = new Array(i + 2).join("*");
 console.log(ast[i]);
}

代码 2 -

var ast = [],
i, j = 4;
for (i = j-1; i >=0; i--) {
  ast[i] = new Array(i + 2).join("*");
  console.log(ast[i]);
}

代码 3 -

var ast = [],
i, j = 4;
for (i = 0; i < j; i++) {
  ast[i] = new Array(j - i).join(' ') + new Array(i + 2).join("*");
  console.log(ast[i]);
}

代码 4 -

var ast = [],
i, j = 4;
for (i = j-1; i >=0; i--) {
  ast[i] = new Array(j - i).join(' ') + new Array(i + 2).join("*");
  console.log(ast[i]);
}

要在文档而不是控制台中打印星号 -

 document.getElementById('anyElement').innerHTML+=ast[i] + '<br />';
于 2016-07-08T10:28:43.867 回答
0

这不是有效的脚本标签。

<script src="scripts.js", "div.js"></script>

你需要把它分成两个标签：

<script src="scripts.js"></script>
<script src="div.js"></script>
于 2013-06-23T14:40:36.257 回答
0

document.writeln除非在页面加载时调用它，否则将完全擦除页面。

因此它将破坏myDiv，导致getElementById失败。

此外，我不确定您要使用该<script>标签实现什么，但看起来您需要其中两个。

编辑：哦，这个：for (var j = 1; j <= 1; j++)只会迭代一次。

编辑2：这是我实施的解决方案。

于 2013-06-23T14:13:13.183 回答
0

这是我的解决方案，它使用 es2015 .replace()，但这里也有一个很好的 es5 polyfill：

var output = document.getElementById('output');



function triangle (size) {
  for (var i = 1; i <= size; i++) {
    output.innerHTML += '*'.repeat(i) + '<br>';
  }
}

triangle(2);

这是 ES3/5 中的解决方案

var output = document.getElementById('output');

function triangle(size) {
  var allLines = '';
  for (var i = 1; i <= size; i++) {
    var oneLine = createLine(i);
    allLines += oneLine;
  }
  return allLines;
}

function createLine(length) {
  var aLine = '';
  for (var j = 1; j <= length; j++) {
    aLine += '*';
  }
  return aLine + "<br/>";
}

output.innerHTML += triangle(3);
<div id='output'></div>

于 2015-12-10T22:37:01.867 回答