Question

我正在学习编程HTML / CSS / Javascript。我创建了一个网页和一个JavaScript代码以在Access数据库中获取一些信息，然后将其呈现给用户。有时是一张大桌子。我只想在代码的开头和结尾处更新一个类和一个innerHTML，以便向用户显示：“等等，页面正在加载” ...在代码运行后，更改该类和innerHTML没有任何内容（“”），则向用户发送的消息将消失。

我做了代码，但是当我的函数运行时，直到函数完成，它才呈现对class和innerHTML的更改...

仅供参考：至此，HTML已经呈现。单击页面上的按钮即可执行Javascript。

我的HTML-我要使用Javascript代码更新的类和innerHTML。

    <section>
        <div id="RunningCode" class="">
            <span id="RunningCode1" class=""></span>
        </div>  
    </section>

函数开头的我的JAVASCRIPT CODE。（这是我要在代码继续之前呈现/更新的内容

var YellowCard = document.getElementById("RunningCode");
YellowCard.className = "mensagemCodeRunning";

var YellowCard1 = document.getElementById("RunningCode1");
YellowCard1.className = "mensagemCodeRunningText";
YellowCard1.innerHTML = "Loading. Please Wait..."

然后在函数末尾输入我的JAVASCRIPT代码：

YellowCard1.className = "";
YellowCard1.innerHTML = ""

YellowCard.className = "";

完整的JAVASCRIPT代码：

function getSpecificSupplier() 
{ 

var YellowCard = document.getElementById("RunningCode");
YellowCard.className = "mensagemCodeRunning";

var YellowCard1 = document.getElementById("RunningCode1");
YellowCard1.className = "mensagemCodeRunningText";
YellowCard1.innerHTML = "Loading. Please Wait..."

var Carrier_Name = Carrier_NameHTML.value;

var cn = new ActiveXObject("ADODB.Connection"); 

var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = MySource;
var rs = new ActiveXObject("ADODB.Recordset"); 


var SQL = "select * from ...

cn.Open(strConn); 
rs.Open(SQL, cn); 

var Linhas_da_Tabela = document.getElementById("Apagando");

while(Linhas_da_Tabela.firstChild) {
    Linhas_da_Tabela.removeChild(Linhas_da_Tabela.firstChild);
}

while (!rs.eof) {

    var table = document.getElementById("mytable");
    var row = table.insertRow(-1);
    var cell0 = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    var cell6 = row.insertCell(6);
    var cell7 = row.insertCell(7);
    var cell8 = row.insertCell(8);


    cell0.innerHTML = rs1
    cell1.innerHTML = rs2
    cell2.innerHTML = rs3
    cell3.innerHTML = rs4

    var WholeDate = new Date(rs("Arrival Time"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell4.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Gate IN"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell5.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Dock IN"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell6.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Dock OUT"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell7.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

    var WholeDate = new Date(rs("Gate OUT"));
    var dd = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getDate());
    var mm = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMonth()+1);
    var yyyy = WholeDate.getFullYear();
    var hh = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getHours());
    var min = new Intl.NumberFormat('en-IN', { minimumIntegerDigits: 2 }).format(WholeDate.getMinutes());

    cell8.innerHTML = "" + mm + "-" + dd + "-" + yyyy + " " + hh + ":" + min + "h";

rs.MoveNext
}

rs.Close(); 
cn.Close(); 

YellowCard1.className = "";
YellowCard1.innerHTML = ""

YellowCard.className = "";


}

Answer 1

查看此信息：Show message while javascript is running

在函数执行后重新绘制，如果将正在执行的javascript代码包含在setTimeout（）中，则可以在代码开始执行之前重新绘制DOM。

将此部分拉出一个单独的函数

var YellowCard = document.getElementById("RunningCode");
YellowCard.className = "mensagemCodeRunning";

var YellowCard1 = document.getElementById("RunningCode1");
YellowCard1.className = "mensagemCodeRunningText";
YellowCard1.innerHTML = "Loading. Please Wait..."

像这样：

function run(){

    var YellowCard = document.getElementById("RunningCode");
    YellowCard.className = "mensagemCodeRunning";

    var YellowCard1 = document.getElementById("RunningCode1");
    YellowCard1.className = "mensagemCodeRunningText";
    YellowCard1.innerHTML = "Loading. Please Wait...";

    setTimeout(getSpecificSupplier(), 0);

    function getSpecificSupplier() { 
        // need to redefine these variables
        var YellowCard = document.getElementById("RunningCode");
        var YellowCard1 = document.getElementById("RunningCode1");


        var Carrier_Name = Carrier_NameHTML.value;

        var cn = new ActiveXObject("ADODB.Connection"); 

        ...

        YellowCard1.className = "";
        YellowCard1.innerHTML = ""

        YellowCard.className = "";


    }

}

Javasript函数更改<div>的HTML类，进行渲染，然后继续运行其余功能代码

1 个答案: