javascript - 函数执行完毕后加载表

Question

我有一个默认隐藏的表格，我只想在 JavaScript (frameLooper()) 函数完成执行后显示它。JavaScript (frameLooper()) 函数在页面加载期间呈现文本消息。我尝试过

 document.getElementById("myTypingText1").style.display = "";

但它不会工作。 //CSS

 <style type="text/css">
 #myTypingText1 {
display: none;
}
</style>

<div id="myTypingText"></div> 
<table id ="myTypingText1" class="table table-condensed table-striped table-bordered">
<caption><h3>Cash Flow and Releases Under Construction</h3></caption>
<thead>
    <tr>
        <th>Overdue</th>
        <th>Batch No</th>
        <th>Collector</th>
        <th>Applicable year</th>
        <th>Borrower</th>
        <th>Area</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Under Construction</td>
        <td>Under Construction</td>
        <td>Under Construction</td>
        <td>Under Construction</td>
        <td>Under Construction</td>
        <td>Under Construction</td>
    </tr>
</tbody>
</table> 

<script type="text/javascript">
var myString = "blah blah balah blah blahautomatically notified by your programmer electronically...lets roll and keep our hands dirty..Drink beer eat kitkat..";
var myArray = myString.split("");
var loopTimer;
    function frameLooper() {
        if(myArray.length > 0) {
        var char = myArray.shift();
            if(char == "^"){
                document.getElementById("myTypingText").innerHTML;
            } else {
                document.getElementById("myTypingText").innerHTML += char;
                }
        } else {
        clearTimeout(loopTimer);
            return false;
        }
        loopTimer = setTimeout('frameLooper()',50);
        document.getElementById("myTypingText1").style.display = "";
    }
        frameLooper();           
</script>

Answer 1

display = ""; 不起作用，因为您的 CSS 正在覆盖它。 put display = "block"; (这是默认的 visible 状态，将覆盖 css)

您还有另一个问题，那就是每次渲染 Angular 色后都会显示表格。您可能只想在动画完成时显示它？因此，您必须将该显示代码移至仅在 myArray.length == 0

时运行的位置