应用div模拟prompt存在的未能解决的问题

来源:互联网 发布:算法经典书籍推荐 编辑:程序博客网 时间:2024/05/01 19:24

javascript中有几个模态阻塞对话框需要模拟分别是:


alert()
prompt()
confirm()
showModalDialog()


这些对话框的共同特点都是执行代码后,包含该代码的代码段都要停止或者说阻塞,等操作返回时,被阻塞的代码继续执行,类似断点。
通常,我们只所以要进行模拟,目的在于改善用户界面体验,或者说我们不想使用ie提供的那种默认的对话框样式,所以,我们想使用div层来进行模拟。
而模拟的难点其实在于如何实现一个类似于其他多线程编程语言中提供的Sleep()函数,但是,javascript是单线程执行的,这一点很可能不久的将来会得到改变,比如,以后很可能会支持如下的javascript脚本

function getValue()
{
   
while( document.getElementById("name").value == "" )
   
{
        window.sleep(
100);//#####将来或许能支持,当前尚不支持该函数
   }

   
return document.getElementById("name").value
}

 

这段代码虽然很简单,但是,我认为,如果能实现该功能了,那么,对上面提到的模拟工作就没有问题的了。其实,我们真正需要的是一个能够使线程进入休眠状态从而让出时间片的sleep()函数,为什么这样说,如果上面的函数写成了像下面的样子,尽管功能是相同的,但是,确会使得程序进入死循环而造成页面假死状态

function getValue()
{
    
while(document.getElementById("name").value=="")
    
{
    }

    
return document.getElementById("name").value;
}


因此,能否利用现有的javascript技术来模拟sleep()应该是该问题的一个核心所在。比如说我们试图写如下的代码段

var name = myPrompt.show("请输入姓名:");
alert(name);


我们的目的是希望我们自己的myPrompt.show()函数创建一个div层来模拟prompt(),这点不难做到,继续下去,在myPrompt.show()里面创建一个div层之后,就需要等待用户输入并点击确定按钮了,确定后,提取用户输入内容作为myPrompt.show()的返回值,问题就在于,我们如何在myPrompt.show()函数中创建一个div层后等待用户的输入,直到用户输入并点击确定按钮后,再继续执行myPrompt.show()函数后面的代码,我们最容易想到的解决办法就是执行一个循环语句,循环检测某个变量是否被赋值(该变量是在用户点击确定按钮时赋值的),如果还没有被赋值,那么,继续等,如果赋值则结束循环,代码继续。如何实现这个,回到了前面讨论的那个getValue()的实现上了,要循环检测但又不造成假死,只有实现sleep()的功能。

我为了做测试,实现了一个模拟prompt的代码,但是!!!!上面提到的问题没有解决!!!!把代码贴出来,希望和兄弟们一起讨论解决之道。

注意:this.waitForUserInput();就是我无法实现的一个函数,也就是模拟sleep()功能

AjaxPrompt = 
{
 div_handle:
null,
 msk_handle:
null,
 div_value:
null,
 timer_name:
null,
 show:
function()
 
{
  
this.showMaskPage();
  
this.showMyPrompt();
  
this.waitForUserInput();
  
this.hideMaskPage();
  
return this.div_value; 
 }
,
 showMaskPage : 
function()
 
{
  
this.msk_handle = document.createElement("<div style="z-index:1000;position:absolute;top:0;left:0;width:"+document.body.clientWidth+";height:"+document.body.clientHeight+""></div>");
  document.body.appendChild(
this.msk_handle);
  
this.msk_handle.innerHTML = "<iframe style="FILTER:Alpha(opacity=20);width:100%;height:100%"></iframe>";
 }
,
 hideMaskPage : 
function()
 
{
  
if(this.msk_handle!=null)
  
{
   document.body.removeChild(
this.msk_handle);
   
this.msk_handle = null;
  }

 }
,
 showMyPrompt : 
function()
 
{
  
this.div_handle= document.createElement("<div style=z-index:1001;position:absolute;top:200;left:300;width:100;height:50;background-color:#cccccc></div>");
  
this.div_handle.innerHTML = "<input id=myprompt_userinput value=请您输入数据><input id=myprompt_button type=button value=确定>";
  document.body.appendChild(
this.div_handle);
  document.getElementById(
"myprompt_button").onclick = this.setUserInput;
 }
,
 setUserInput : 
function()
 

  AjaxPrompt.div_value 
= document.getElementById("myprompt_userinput").value;
  document.body.removeChild(AjaxPrompt.div_handle);
 }
,
 waitForUserInput : 
function()
 
{
  
//这里需要实现类似sleep()的功能
 }

}


代码希望如下调用

function test()
{
    
var name = AjaxPrompt.show();
    alert(name);
}


但是,由于this.waitForUserInput();没有能够实现预想的效果,因此,运行后,alert出来的始终是null
 

原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 户主信息页掉了怎么办 户主变了户口本首页怎么办 大人户口迁走小孩户口怎么办 网银转账处理中怎么办 教育部学籍在线验证报告有错怎么办 验证码连续输入三次错误怎么办 交通运输监察大队截车了怎么办 平安安康续保没成功怎么办 危险品经营许可证到期了怎么办 郑万350渝万怎么办 厂里饭堂的饭好难吃怎么办 学校的食堂饭菜不好不卫生怎么办 亲戚借钱我真没有怎么办 榴莲肉酸了吃了怎么办 亲戚赖在家里住怎么办 食堂饭菜味道差该怎么办 被监视居住公安打电话睡着了怎么办 鱼缺氧浮上水面怎么办 车载低音炮有电流声怎么办 925纯银变黑了怎么办 银子放久了变黑怎么办 高铁票网上售空怎么办 高铁票出票失败怎么办 高铁票名字打错怎么办 高铁票姓名错了怎么办 高铁票弄丢了怎么办 用过的车票丢了怎么办 高铁票被水洗了怎么办 沈阳地铁卡丢了怎么办 火车票没写检票口怎么办 吃鸡听的脚步声距离太近怎么办 检票时车票丢了怎么办 高铁出站没检票怎么办 高铁来不及取票怎么办 被发现假的增值税发票怎么办 高铁票身份证验证失败怎么办 网上订的火车票查不到怎么办 已经参加工作想学个本科证怎么办 火车晚点耽误下一趟列车怎么办 门外装监控没有预留电线怎么办 框架柱主筋柱顶预留长度不够怎么办