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会覆盖它。放display = "block";（这是默认的visible状态并覆盖css）

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

时运行的位置

Answer 2

我找到了解决方案。我在我的javascript文件中添加了一个函数

<script type="text/javascript">
window.onload = function() {
    var tble = document.getElementById("myTypingText1");
    tble.style.display = "none";
}
var myString = "Cashflow and releases is under construction.It's code is blah and balah and balh and blah automatically 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);
        showTable();
            return false;
        }
        loopTimer = setTimeout('frameLooper()',50);
    }
    function showTable(){
        document.getElementById("myTypingText1").style.display= "";
    }
    frameLooper(); 
    //showTable();

功能完成执行后加载表

2 个答案: