Question

我试图在我的网站上绘制一个星形图案（通过按下按钮激活），如下所示：

package main

import (
  "fmt"
  "io"
  "os"

  "github.com/docker/docker/api/types"
  "github.com/docker/docker/api/types/container"
  "github.com/docker/docker/client"
  "golang.org/x/net/context"
)

func main() {
  ctx := context.Background()
  cli, err := client.NewEnvClient()
  if err != nil {
    panic(err)
  }

  imageName := "bfirsh/reticulate-splines"

  out, err := cli.ImagePull(ctx, imageName, types.ImagePullOptions{})
  if err != nil {
    panic(err)
  }
  io.Copy(os.Stdout, out)

  resp, err := cli.ContainerCreate(ctx, &container.Config{
    Image: imageName,
  }, nil, nil, "")
  if err != nil {
    panic(err)
  }

  if err := cli.ContainerStart(ctx, resp.ID, types.ContainerStartOptions{}); err != nil {
    panic(err)
  }

  fmt.Println(resp.ID)
}

我已尝试使用下面的JS代码来完成此操作，但字符并不像我希望的那样出现。

 *******
 ******
 *****
 ****
 ***
 **
 *

我还对以下HTML代码进行了采样

var x="*";

for(i=0;i<28;i++) {
    function myFunction(){document.getElementById("Asterisk").innerHTML=x}
}

Answer 1

你的javascript无法正常工作，因为你在for循环中声明了一个函数，而不是调用它。 function关键字是一个声明，这意味着您将在每个循环中创建该函数。

其次，您只需要在元素中获得一个*，因为x不会更改。你试图分配它28次，但这只会将值设置为一个星号28次;不要创建一系列星号。

相反，您需要使用两个嵌套for循环构建一个长字符串，每行一个，另一个用于行中的每个字符（列）。随着外循环（行）的增加，取它的索引并从内循环（列）的长度中减去它。这样，随着外循环的增加，内循环迭代的次数减少。下面是一些理解这个概念的伪代码：

for i in 28:
  for j in (28 - i):
    print '*'

这会导致（实际上不会显示变量值，为了清晰起见，它们就在那里）：

i = 0  ****************************  j = 28 - 0
i = 1  ***************************   j = 28 - 1
i = 2  **************************    j = 28 - 2
etc...

要将其实际显示为单独的行，您需要在每行之间写一个<br>标记，以便它“中断”到下一行。在HTML中不遵守换行符和其他空白字符，因此如果没有<br>标记，浏览器将只在一条长行中呈现所有行。伪代码类似于：

for i in 28:
  for j in (28 - i):
    print '*'
  print '<br>' # this happens after each loop

这将导致：

****************************<br>
***************************<br>
**************************<br>
etc...

请记住，您不是要打印，而是将*和<br>附加到一个长字符串中，然后您最终可以将其设置为innerText或innerHTML一个元素。

PS：我故意使用伪代码来帮助解释这些概念，而不仅仅是给你一些复制粘贴。

Answer 2

试试这个

function myFunction() {
    var str = '*';
    var content = '';
    for(var i=7; i>0; i--) {
        content += str.repeat(i) + "\n";
    }
    document.getElementById("Asterisk").innerHTML = '<pre>' + content + '</pre>';
}

希望帮助

Answer 3

尝试this，

function myFunction() { // you need to put for loop inside the function
  var br = document.createElement("br"); // for every new line we need br
  var asterisk = document.getElementById("Asterisk"); 
  for (i = 28; i > 0; i--) {
    asterisk.innerHTML += x.repeat(i - 1); // repeat "*" -1 times every time
    asterisk.appendChild(br); // append br to div, so it will paste the new * to new line
  }
}

希望有所帮助，

Answer 4

你可以这样做。

<!doctype html>
<div id=Asterik>
</div>
<script>
window.onload=function(){
     str='';
     for(var i=7;i>0;i--){
       for(var j=i;j>0;j--)str=str+"*";
       str=str+"<br>";
     }
     document.getElementById("Asterik").innerHTML=str;
};


</script>

Answer 5

如果你动态金字塔试试这个，

您可以在运行时定义行

＆＃13;

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

＆＃13;

<input type="number" value="Rows you want" id="pyramid_row">
<button id="filler" onclick="myFunction()"> Fill in the box </button>

＆＃13;

Answer 6

在正确理解概念后进行管理。这是我的解决方案，以防任何人需要它作为参考。

i=0;

function myFunction(){

for(;i<7;i++) { 

for(a=i;a<7;a++) { 

$('#Asterisk').append("*");


}

$('#Asterisk').append("<br>");

}


}

如何使用Javascript重复一个角色？

6 个答案: