ajax中产生提示信息的类

最新推荐文章于 2021-08-05 22:32:27 发布

顺子

最新推荐文章于 2021-08-05 22:32:27 发布

阅读量1k

点赞数

分类专栏： HTML/JavaScript/CSS Jquery/ajax 文章标签： ajax function 编程 div

Jquery/ajax 同时被 2 个专栏收录

33 篇文章

订阅专栏

HTML/JavaScript/CSS

29 篇文章

订阅专栏

本文介绍了一个用于AJAX应用程序的通知组件设计思路，通过一个简单的Notice类实现提示信息的显示、隐藏及定时消失等功能，方便开发者快速集成到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于ajax的应用中，当程序交互的时候经常需要以提示的方式来告诉用户当前程序的状态，然后随着状态的变化也需要改变提示信息的样式，比如隐藏，显示，一定时间后消失，这样都是一样常见的需求，所以可以把这些封装在一个类中来简化编程的逻辑。 Notice这个类当前的设计思路是根据id来操作一个已有的element，然后可以改变它的状态，主要用法如下： g_notice = new Notice("notice"); //初始化状态变化 g_notice.Show(); g_notice.setHTML("XXXXXXXX"); 交互结束，隐藏该类 g_notice.hideAfter(1000) //1秒中后隐藏该div也可以立即隐藏 g_notice.Hide() 下面是所有接口： Show(); setPosition(x,y); Hide(); showAfter(x); hiedAfter(x); setHTML(XX); 一个很简单的程序，可以在这个基础上加深，比如动态的创建元素等等，关键在于如何暴露需要的功能，只完成该对象应该做的事情，这些是才是面向对象程序设计的本质。

function Notice(objID) { //if(document.getElementById(objID)) this.obj = document.getElementById(objID); this.obj.style.display = "none"; ;}

Notice.prototype.setPosition = function(x,y){

this.obj.style.left = x; this.obj.style.top = y; }

Notice.prototype.Show = function(){

this.obj.style.display = "block"; }

Notice.prototype.Hide = function(){

this.obj.style.display = "none"; }

Notice.prototype.hideAfter = function(delayTime){ var oThis = this.obj; var hide = function(){oThis.style.display = "none";} window.setTimeout(hide,delayTime); }

Notice.prototype.showAfter = function(delayTime){ var oThis = this.obj; var show = function(){oThis.style.display = "block";} window.setTimeout(show,delayTime);

}

Notice.prototype.setHTML = function(text){

this.obj.innerHTML =text; }