📄 day3_4.html
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高级教程</title>
<script language="JavaScript">
<!-- hide me
var the_count = 0;
var the_timeout;
function doTimer()
{
window.document.timer_form.the_text.value = the_count;
the_count += 2;
the_timeout = setTimeout("doTimer();", 2000);
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高级教程 - 第三课</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><strong>第四页：<font size="3" face="宋体">定时循环的做法</font></strong>
<p><font size="3"><font face="宋体">要使定时器循环工作你需要写一个函数实现循环调用。这里是<br>
一个例子： </font></font></p>
<font size="3">
<blockquote>
<pre><font face="宋体">var the_count = 0;
var the_timeout;
function doTimer()
{
window.document.timer_form.the_text.value = the_count;
the_count += 2;
the_timeout = setTimeout("doTimer();", 2000);
}
</font></pre>
</blockquote>
</font>
<p><font size="3"></font><font size="3" face="宋体">这里用到的定时器就是上一页所用的定时器。当用户点击按钮<br>
时就调用该函数。该函数将<tt>the_count</tt>的当前值写到文字框中。<br>
然后<tt>the_count</tt>增加2，则开始调用函数自身。文字框中的数值<br>
也相应更新，<tt>the_count</tt>在增加2， 则再次调用函数自身。<tt>在等<br>
待的这两秒期间浏览器则可以执行其他的同步工作。the_count</tt><br>
一增加2就执行另一次<tt>setTimeout()</tt>。你不用担心会造成内存<br>
崩溃，因为在给定时间内只有一个<tt>setTimeout()</tt>在执行。</font></p>
<font size="3">
<p><font size="3" face="宋体">而无限的"while" 循环则会锁定浏览器的工作，在执行该循环<br>
的过程中浏览器不能同时执行别的任何指令。而<tt>setTimeout</tt>则<br>
可以使循环的间隙中让浏览器执行别的工作。 </font></p>
<p><font face="宋体">如何取消<tt>setTimeout</tt> </font></p>
<p><font face="宋体">现在你已经学习了如何设置一个无限循环。但是你必须懂得如<br>
何终止循环。其指令就是<tt>clearTimeout</tt>。上例中定时器还有下<br>
面这个表单元素： </font></p>
<blockquote>
<pre><font face="宋体"><input type="button" value="stop timer"
onClick="clearTimeout(the_timeout);">
</font></pre>
</blockquote>
</font>
<p><font size="3"><font face="宋体">点击这个按钮就可以终止定时器。指令是<tt>clearTimeout()</tt>，其<br>
实很简单，如果你这样设置<tt>setTimeout</tt>，<br>
the_timeout = setTimeout("some javascript",3000);<br>
<br>
</font>你可以这样取消定时器：<font face="宋体"><br>
clearTimeout(the_timeout);<br>
<br>
</font>很简单，对吧？下面我们看一个复杂循环定时器，一个可以报<br>
告时间的定时器。</font><font size="2"><font face="宋体"> <a href="day3_5.html">>></a></font></font></p>
<p><font face="宋体" size="3" color="#000000"><strong>JavaScript高级教程</strong></font><font color="#FF0000" face="宋体" size="3"><br>
</font><font face="宋体"><font color="#FF0000">第一页</font> <a href="day3_4.html">Javascript高级教程
- 第三课</a><br>
<font size="3"><font color="#FF0000">第二页</font> <a href="day3_2.html">如何给事件定时</a><br>
<font color="#FF0000">第三页</font> <a href="day3_3.html">定时循环的概念</a><br>
<font color="#FF0000">第四页</font> 定时循环的做法<br>
<font color="#FF0000">第五页</font> <a href="day3_5.html">一个Javascript编写的时钟</a><br>
<font color="#FF0000">第六页</font> <a href="day3_6.html">给定时器加入变量</a><br>
<font color="#FF0000">第七页</font> <a href="day3_7.html">识别用户的浏览器</a><br>
<font color="#FF0000">第八页</font> <a href="day3_8.html">如何识别用户的浏览器</a><br>
<font color="#FF0000">第九页</font> <a href="day3_9.html">对象和方法的识别</a><br>
<font color="#FF0000">第十页</font> <a href="day3_10.html">History对象</a></font></font></p>
<p><font size="3">[<a href="day1_1.html">第1课</a>][<a href="day2_1.html">第2课</a>][第3课][<a href="day4_1.html">第4课</a>][<a href="day5_1.html">第5课</a>]</font></p>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根据
网猴 相关文章改编，版权归原作者所有。</a> </font><font color="#000000"><span class="smallfont"></span></font></p>
<!--webbot bot="Include" endspan i-checksum="15926" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -