javascript - 如何在 HTML 标签中显示 Javascript 函数？

Question

我正在尝试为 children 创建一个计数表。我想显示一个按钮，该按钮将显示列表中的计数。我可以将其打印到页面，但我想将其打印在 HTML 中的段落标记中，请查看并建议我解决方案。

<p id="main"></p>
<button onclick="counting();" >Counting 1 to 10</button>

var counting = function(){
    var myCount = 1;
    while(myCount < 11){
    var countTotal = myCount;
    document.getElementById('main').innerHTML = countTotal;
    //print(countTotal);
    myCount++;
    }
return countTotal;
}

Answer 1

@Lal 的答案是答案(我在评论中写了相同的内容)。

但是，我建议另一种方式:

您可以使用setInterval代替使用while循环，在我看来，为 child 创建一个计数表的用户体验是比性能更重要:

看一下这段代码:

var counting = function(){
    var myCount = 1;
    document.getElementById('main').innerHTML += myCount + "<br/>";
    var _timeout = setInterval(function(){
        myCount++;
        document.getElementById('main').innerHTML += myCount + "<br/>";
        if(myCount == 10) clearTimeout(_timeout)
    },1000)
}

此函数设置一个计时器，每 1000 毫秒(1 秒)显示一个新数字，以便让 child 有时间数数。

看看这个例子:https://jsfiddle.net/Frogmouth/bke47w3u/2/

if(myCount == 10)clearTimeout(_timeout)当myCount为10时停止计时器。

将单元格添加到表格:

如果您需要添加数字(例如表格单元格)，只需更改 html 容器#main:

<table id="main"></table>

以及.innerHTML打印的html:

document.getElementById('main').innerHTML += "<tr><td>" + myCount + "</td></tr>";

这将显示一个表格，每行 1 个单元格，总共 10 行。

示例:https://jsfiddle.net/Frogmouth/bke47w3u/5/