Javascript - 事件点击时页面上的加载/忙碌指示器或透明 div

Question

我有一个客户端 javascript 函数，它在单击按钮时触发(基本上，它是一个计算器!!)。有时，由于页面上的大量数据，javascript 计算器功能需要很长时间，并使页面对用户来说显得不活动。我打算在整个页面上显示一个透明的 div，可能有一个繁忙的指示器(在中心)直到计算器功能结束，以便用户等到进程结束。

function CalculateAmountOnClick() {  // Display transparent div  // MY time consuming loop!    {    }  // Remove transparent div }

关于如何解决这个问题有什么想法吗？当我的计算器功能启动时，我应该使用 javascript 将 css 类分配给 div(围绕我的整个页面的内容)吗？我试过了，但没有得到想要的结果。在 IE 6 中面临透明度问题。另外，我将如何在这样一个透明的 div 中显示加载消息 + 图像？

TIA

Answer 1

显示窗帘的 Javacript:

function CalculateAmountOnClick () {
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function(){ return false; }
  try {
    // your operations
  }
  finally {
    curtain.parentNode.removeChild( curtain );
  }
}

你的 CSS:

#curtain {
  position: fixed;
  _position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  _height: expression(document.body.offsetHeight + "px");
  background: url(curtain.png);
  _background: url(curtain.gif);
}

(根据需要将 MSIE 6 下划线 hack 移动到有条件包含的文件中。)

您可以将其设置为窗帘的添加/删除功能，或包装器:

function modalProcess( callback ) {
  var ret;
  var curtain = document.body.appendChild( document.createElement('div') );
  curtain.id = "curtain";
  curtain.onkeypress = curtain.onclick = function(){ return false; }
  try {
    ret = callback();
  }
  finally {
    curtain.parentNode.removeChild( curtain );
  }
  return ret;
}

然后你可以这样调用:

var result = modalProcess(function(){
  // your operations here
});