zoukankan html css js c++ java

js 页面按钮提交后创建显示loading div 操作完成后再隐藏或删除进度div

预期效果：

1、点击Save按钮，创建及显示loading div框

2、Save操作完成后，再删除loading 及弹出提示结果

<html>
<head>
</head>
<body>
    <input type="button" value="Save" name="btnSave" />
</body>
</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

function loadingShow(){
    var loadingContainer = $("div.loading");
    if (loadingContainer.length <= 0) {

        loadingContainer = $("<div>", { Class: "loadingWhenSave" , id:"loadingWhenSave" });
        var img = $("<img>", { src: "loading.gif" });
        loadingContainer.html("");
        loadingContainer.append(img).css({
            position: "absolute", //"absolute",
            zIndex: "9999",
            textAlign: "center",
            backgroundColor: "#000",
            border: "solid 4px red",
            paddingTop: "18px",
            fontSize: "14px",
            top: "30%",
            left: "40%",
            height: "300px",
             "400px"
        });
        //document.body.appendChild(loadingContainer);
        loadingContainer.appendTo('body');
    }
    //$(loadingContainer).show();
}

function loadingHide(){
    
    $("#loadingWhenSave").remove();
}

function saveFinished(){
    //loadingHide();
    
    alert("save success.");
}

$(document).ready(function(){
    

    $(btnSave).click(function(){

        loadingShow();

        setTimeout("saveFinished()",2000);

    });
    
    
});

</script>

查看全文

相关阅读:
前后端分类状态下SpringSecurity的玩法
 拓展 centos 7
linux 日志管理
 Linux 内存监控
 Linux 周期任务
 Linux 文件系统
 linux 磁盘管理
 图论最短路总结
 进阶线段树之乘法操作
 暑假集训Day 10 小烈送菜

原文地址：https://www.cnblogs.com/freeliver54/p/3359154.html

js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

js 页面按钮提交后创建显示loading div 操作完成后再隐藏或删除进度div