javascript 函数与页面元素(难度问题)

<body>
<div id=ttText style="display:none">程序运行中</div>
<button onclick="run_step1()" id=button1>begin</button>
<script>
function run_step1()
{
ttText.style.display="";
button1.style.display="none";
setTimeout("run_step2()",1);
}
function run_step2()
{
str = ""
for(var i=0;i<15000;i++)
{
str +=" ";
}
run_step3();
}
function run_step3()
{
ttText.style.display="none";
button1.style.display="";
}
</script>
</body>呵呵，但是要是计算量很大，还是会使浏览器失去响应。要让它不失去响应......要等我一会儿忙完了自个的事了再研究

嗯，这个答案要好一点，不过就算速度慢了很多哦。要快，设计就更复杂了，而且我已经回了3贴，你回应之前也不能在贴新的代码上来了。明天再研究吧。<body>
<div id=ttText style="display:none">
程序运行中<button onclick="CANCLE = true;">停止</button><BR>
<span id=currentState></span>
</div>
<button onclick="run_step1()" id=button1>开始</button>
<span id=result></span>
<script>
var i=null;
var sum =0;
var CANCLE = false;
function run_step1()
{
ttText.style.display="";
button1.style.display="none";
setTimeout("run_step2()",1);
CANCLE = false;
}
function run_step2()
{
if (CANCLE)
{
run_step3();
return;
}
if (i == null)
{
//初始化
//注意：这里不能写var，因为循环变量和结果都为全局变量。
i = 1;
sum = 0;
run_step2();
}
else if (i<1001)
{
sum += i;
i++;
currentState.innerText = i;
setTimeout("run_step2()",0);
}
else
{
run_step3();
}
}
function run_step3()
{
ttText.style.display="none";
button1.style.display="";
button1.value="重新开始";
result.innerText = sum;
}
</script>
</body>
呵呵，虽然只有20分，可是在设计过程中自己获得新的经验比分数来的要重要阿。所以我们不要小看小分的帖子，分数不能当饭吃，经验可是能换饭吃的哦！

晕啊，这样也行？
用setTimeOut不是不行，但你们考虑了程序结构吗？
我是想用一个ShowText(),hideText(),两个函数来实现程序各个地方的调用。
用settimeout必然破坏这种好的结构，使程序乱七八糟的。期待好的答案～～～

在function中写stauts可以在function结束之前显示出来.我试过的.

to:LvYou(吕游)
stauts太不醒目了
能在function中写元素可以在function结束之前显示出来的方法吗？

呵呵，我早说过了“程序要精心设计”的嘛。javascript是这样的啦，不运行到结束就不会刷新页面结果的。结构肯定要破坏，关键是从设计的时候就要考虑好怎么适应这种结构来设计。我想马儿跑，又想马儿不吃草

to: emu(ston)
有个发现：<div id=ttText style="display:none">程序运行中</div>
<script>

function run(){
ttText.style.display="";
alert();//加这个···············
for(var i=0;i<100000;i++){}
ttText.style.display="none";
}
</script>
------------------------------------------------加这个就正常了，说明只要能先断一下，就可以显示。
新的思路：用一个什么不显示的东东先中断一下，然后再执行，就应该可以实现了。。你看有没有办法？

呵呵，alert是让程序中断下来，这样浏览器就有事件计算页面元素的表现了，但是在计算过程不能不停的alert啊。用setTimeout或者setInterval来解决应该比较合理一点。看看这个，从1加到10000000，计算过程不失去响应。关键是设计嘛。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body>
<div id=ttText style="display:none">
程序运行中......<BR>
<span id=currentState></span>   <button onclick="CANCLE = true;">停止</button><BR>
</div>
<button onclick="run_step1()" id=button1>开始</button>
<span id=result></span>
<script>
var i=0;
var sum =0;
var CANCLE = false;
var max = 1000000; //循环的终点
var step = 9999; //步长：选择合适的步长可以在响应能力和计算速度上获得比较好的折衷。
//(步长用9999而不是10000只是为了显示的时候好看，其实都一样)
var timeStart = "";
function run_step1()
{
if (i == 0)timeStart = new Date();
ttText.style.display="";
button1.style.display="none";
setTimeout("run_step2()",1);
CANCLE = false;
}
function run_step2()
{
if (CANCLE)
{
ttText.style.display="none";
button1.style.display="";
button1.value="继续";
return;
}
if (i == null)
{
//初始化
//注意：这里不能写var，因为循环变量和结果都为全局变量。
i = 1;
sum = 0;
run_step2();
}
else if (i<=max)
{
var endValue = i+step;
if (endValue >max) endValue = max+1;
for (j=i; j<endValue ; j++)
sum += j;
i+=step;
currentState.innerText = i;
result.innerText = "临时结果："+sum;
setTimeout("run_step2()",0);
}
else
{
run_step3();
}
}
function run_step3()
{
ttText.style.display="none";
button1.style.display="";
button1.value="重新开始";
result.innerText = "最终结果"+sum+" 用时："+(new Date-timeStart)/1000+"秒"
sum = 0;
i = 0;
}
</script>
</body>
</html>

alert是让程序中断下来
－－－－－－－－
除了alert之外，有没有什么办法可以打到类似效果？
我想实现的是调用一个函数显示，再调用一个函数隐藏。
你说的对，关键是设计。那这2个函数怎么设计？

呵呵，忘了还有confirm、prompt也可以的，跟alert一样的道理，我想你是不会考虑的。

showModalDialog("about:<script>window.close()</scr"+"ipt>",null,"");

哎，，变通一下嘛。。
showModalDialog("about:<script>window.close()</scr"+"ipt>",null,"dialogLeft:1110px;dialogTop:1110px;dialogWidth:0px;dialogHeight:0px");

呵呵，不错，不过还是没有响应。cpu占用也太高。试试：
for (var i=1;i<300;i++)
{
output.innerText = i;
showModalDialog("about:<script>window.close()</scr"+"ipt>",null,"dialogLeft:1110px;dialogTop:1110px;dialogWidth:0px;dialogHeight:0px");
}

摆到一起试试：<body>
<button onclick=test1()>testShowModalDialog</button>
  
<button onclick=test2()>testSetTimeout</button>
<BR><BR>
<span id=output></span>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>各有千秋吧：一个要破坏程序，一个要没有响应、屏幕闪动。还有更妙的法子没？

Lostinet的代码提醒了一件事：<script>
alert("</script>")
</script>和<script>

</script>是不一样的。

调试易

javascript 函数与页面元素(难度问题)

解决方案 »