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>
  • 相关阅读:
    ptrace
    CentOS 5.4 final下Systemtap的安装
    SystemTap 静态探针安装包
    sysdig
    ORACLE 内部原理
    An introduction to KProbes
    CentOS6.5升级手动安装GCC4.8.2 与 CentOS 6.4 编译安装 gcc 4.8.1
    在Oracle Linux上安装dtrace
    dwarf调试信息格式入门
    MySQL 5.6.20-4 and Oracle Linux DTrace
  • 原文地址:https://www.cnblogs.com/freeliver54/p/3359154.html
Copyright © 2011-2022 走看看