Js利用Div自定义提示框弹窗+定时器

朱雀 2022-04-25 06:44 158阅读 0赞

**Html代码： **

**js代码：**

//定时器：检查当前【待审批】的信息
    var setTimePlan = setInterval("onCheckWaitApproval()", 5 * 60 * 1000);
    
    
    //检查当前【待审批】的信息
    function onCheckWaitApproval() {
        $.ajax_({
            method: "GetCheckMsg",
            type: "POST",
            success: function (d) {
                var result = JSON.parse(d.d);
                if (result.Result) {
                    var count = result.Msg;
                    if (parseInt(count) > 0) {
                        //填充新内容之前，先初始化
                        onCloseAlertDiv();
                        $("#alertDivId").addClass("alertDivClass");
                        var alertDivObj = document.getElementById("alertDivId");
                        alertDivObj.innerHTML = "<div class='alertMsg'><span style='color:red'>新增【" + count + "】条【信息】待审批！</span><br/><br/>" +
                            "<span class='btn r' onclick='onCloseAlertDiv()' style='width:80px;border-radius:3px;'>确  定</span></div >";
                    }
                }
                else {
                    //结束定时器
                    clearInterval(setTimePlan);
                }
            },
            error: function (e) {
                //结束定时器
                clearInterval(setTimePlan);
            }
        })
    }
    
    //关闭提示窗Div
    function onCloseAlertDiv() {
        $("#alertDivId").removeClass("alertDivClass");
        var alertDivObj = document.getElementById("alertDivId");
        alertDivObj.innerHTML = "";
    }

**效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWNoYW5nMTk5NTA3MDM_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWNoYW5nMTk5NTA3MDM_size_16_color_FFFFFF_t_70]: /images/20220126/3b20fbbac8e648329900e65c9b952712.png