javascript经典打星星题目
编程语言如下
<head>
<meta charset="UTF-8">
head>
<script>
function myFunction(){
for(var i=1; i<Number(text); i++){
for(var j=1; j<=(Number(text)-1)-i; j++){
document.write(' ');
};
for(var n=1; n <= i; n++){
document.write("*"+' ');
}
document.write('
')
};
}
script>
<body>
塔の階数<input type="text" id="number" name="number">
<input type="button" id="button" name="" value="展示" onclick="myFunction();">
body>
html>
我想要实现在input里输入一个数字，点击展示就会出现相应数字的行数的星星。
比如输入数字2，会出现下面的效果。
// *
// * *
输入数字3会出现下面的效果。忽略//
// *
// * *
// * * *
如果把上面的代码的Number(text)换成数字是可以打印星星的。但是是固定的不是根据输入的数字来变的。
怎么实现输入数字星号会跟着变化！
<head>
<meta charset="UTF-8">
</head>
<script>
function myFunction(){
num = parseInt(document.querySelector('#number').value)
var el = document.querySelector('#board')
var html = ''
for(var i=1; i<num; i++){
for(var j=1; j<=(num-1)-i; j++){
html += ' ';
};
for(var n=1; n <= i; n++){
html += "*"+' ';
}
html += '<br/>'
};
el.innerHTML = html
}
</script>
<body>
塔の階数<input type="text" id="number" name="number">
<input type="button" id="button" name="" value="展示" onclick="myFunction();">
<pre id="board"></pre>
</body>
</html>
该回答引用ChatGPT
如有疑问，可以回复我！
你可以将输入框中的数字获取出来，然后将其转换为数字类型，作为控制星星行数的变量。可以通过使用document.getElementById()获取输入框元素，然后使用.value获取输入框中的文本内容。同时，需要将生成的星星输出到页面中，可以使用document.createElement()创建一个新的元素，然后使用appendChild()将其添加到页面中。
以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
塔の階数<input type="text" id="number" name="number">
<input type="button" id="button" name="" value="展示" onclick="myFunction();">
<div id="output"></div>
<script>
function myFunction(){
var text = document.getElementById("number").value; // 获取输入框中的数字
var num = parseInt(text); // 转换为数字类型
var output = document.getElementById("output");
output.innerHTML = ""; // 清空输出区域
for(var i=1; i<=num; i++){
var row = document.createElement("div"); // 创建一个新的div元素
for(var j=1; j<=num-i; j++){
var space = document.createTextNode(" "); // 创建一个空格文本节点
row.appendChild(space); // 将其添加到div元素中
};
for(var n=1; n<=i; n++){
var star = document.createTextNode("* "); // 创建一个星号文本节点
row.appendChild(star); // 将其添加到div元素中
}
output.appendChild(row); // 将div元素添加到输出区域中
};
}
</script>
</body>
</html>
参考GPT和自己的思路：您需要修改代码中的一些部分，使其能够根据输入的数字来打印相应行数的星星。以下是一个修改后的示例代码：
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
塔の階数<input type="text" id="number" name="number">
<input type="button" id="button" name="" value="展示" onclick="myFunction();">
<div id="tower"></div>
</body>
<script>
function myFunction(){
// 获取输入框中的数字
var num = Number(document.getElementById('number').value);
// 用一个变量来保存星星的字符串
var starStr = '';
// 外层循环控制行数
for(var i = 1; i <= num; i++){
// 内层循环控制每一行中的空格数
for(var j = 1; j <= num - i; j++){
starStr += ' ';
}
// 内层循环控制每一行中的星号数
for(var k = 1; k <= 2 * i - 1; k++){
starStr += '*';
}
// 添加换行符
starStr += '<br/>';
}
// 将星星的字符串输出到页面上
document.getElementById('tower').innerHTML = starStr;
}
</script>
</html>
在这个示例代码中，我们首先获取了输入框中的数字，然后使用两个嵌套的循环来控制每一行的空格和星号数量，并将它们添加到一个字符串中。最后，我们将这个字符串输出到页面上的一个DIV元素中，从而实现了打印星星的功能。