页面消息提示框，带滤镜效果，渐入渐出

最新推荐文章于 2025-11-07 02:19:58 发布

原创最新推荐文章于 2025-11-07 02:19:58 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #CSS #Cache #HTML

web前端专栏收录该内容

6 篇文章

订阅专栏

本文展示了一个HTML页面与JavaScript通过AJAX进行交互的示例。具体包括使用CSS定义元素样式，JavaScript通过AJAX获取数据并更新页面内容，以及如何显示提示信息。

HTML部分：

.article {font-size: 9pt;
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden
; background-color: #FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 0px}

</STYLE>

<tbody>

</tbody>

js部分：

function storeHour(obj,indexid){

$.ajax({
     type:"POST",
     url:"getOptrionallastPlanTime.do",
     cache:false,
     async:false,
     data:"principal="+temp[1]+"&personHour="+count,
     success:function(msg){
     if(msg == "") {
        return;
      }else{
        divMsg.style.display ="";
        divMsg.innerText = "";
        planTimes[ids].value =msg;
        hiddenPersonID[ids].value = exePersonIDs[ids].value+","+count+","+msg;
        count = Number(exePersonIDs[ids].value.split(',')[3])+Number(count);
        if (itemWork[i].value == '0') {
         ShowMsg('<font color="red">硬派工单</font></br>当前计划完成时间不延后<br> 硬派任务不纳入月工时统计');
        } else {
         ShowMsg(exePersonIDs[ids].value.split(',')[1]+'当前工时为：'+exePersonIDs[ids].value.split(',')[3]+'小时，累加该次工时为：'+count+'小时！');
        }
      }
      }

   });

}

function ShowMsg(text) {
var divid = document.getElementById("divmsg");
divid.style.display = '';
divid.innerHTML = text;
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();

setTimeout('HideDIV()', 3600 )
}