JavaScript进阶教程第三课

发布时间：2023-02-16 12:52:35 所属栏目：Java 来源：互联网

导读：事件的定时以及浏览器的识别随着我们所掌握的JavaScript日渐丰富，我们可以编制出越来越复杂的应用程序。上次的课程中我们学习了如何利用JavaScripts编写Cookies。今天我们将学习如何加入定时功能。给时间定时的能力在浏览器中非常有用，而在动态HTML应用中

　　事件的定时以及浏览器的识别

　　    随着我们所掌握的JavaScript日渐丰富，我们可以编制出越来越复杂的应用程序。上次的课程中我们学习了如何利用JavaScripts编写Cookies。今天我们将学习如何加入定时功能。给时间定时的能力在浏览器中非常有用，而在动态HTML应用中发挥更大的功用。

　　    然而在不同的浏览器中将某物体进行移动的能力有很大的差别。要想在不同的浏览器中都可以应用动态HTML的东西，你需要做一些特别的处理。所以在讲解完事件定时之后我将讲解如何识别用户所使用的是何种浏览器（针对不同的浏览器你可以使用不同的程序代码）。

　　    先学习事件的定时。点击下面的按钮，3秒钟后将弹出一个提示框。

　　    在Javascript给事件定时很容易。其关键指令是setTimeout()和clearTimeout()方法。利用setTimeout(), 指令可以在未来的某个指定时间执行特定指令。如果你改变主意，你可以用clearTimeout()取消setTimeout的定时.

　　    下面是setTimeout的基本格式：

　　    var the_timeout = setTimeout("some javascript statement", some_number_of_milliseconds);

　　    在上面的例子中用到的指令如下：
　　    var the_timeout = setTimeout("alertAndRedirect ();",3000);

　　    该语句中有3项重要内容：

　　    setTimeout返回一个值。在该语句中the_timeout是一个变量，它指向特定的setTimeout。

　　    如果你想取消该setTimeout的定时，你只需引用该变量即可。你可以给变量起一个别的名称。

　　    在setTimeout中用到的第1个变量是一个JavaScript 语句的字符串。

　　    在本例中第1个参数是字符串："alertAndRedirect();"alertAndRedirect是为载入一个提示框而编写的一个函数，当用户点击“OK”时还重新回到本页面。

　　    注意在引号中的内容是一个完整的JavaScript语句，带有分号和其他必须的语法. 如果你执行该段代码则会调用函数lertAndRedirect。setTimeout只规定了该语句出现的时间。

　　    以下是函数alertAndRedirect()的代码：

　　    function alertAndRedirect()
　　    {
　　        alert('ok! exhale!');
　　        window.location.replace("timing.htm");
　　    }

　　    setTimeout的第2个参数指定了在多少毫秒之后执行第1个参数。一秒钟等于1000毫秒。所以如果你想让某事在3秒钟之后发生你必须将第2个参数设置为3,000毫秒。

　　    我们可以做下面的练习熟悉它的工作原理：

　　

　　    其制作方法就是让按钮的onClick事件调用以下函数：

　　    function ringBell()
　　    {
　　        var timer1 = setTimeout("window.document.the_form.the_text.value='3 seconds!';",3000);
　　        var timer2 = setTimeout("window.document.the_form.the_text.value='6 seconds!';",6000);
　　        var timer3 = setTimeout("window.document.the_form.the_text.value='9 seconds!';",9000);
　　    }

　　    它的意思是，“从现在开始，三秒钟后显示‘三秒'，六秒钟后显示‘六秒'，九秒钟后显示‘九秒'”，很好理解，对吧？

　　    但是，下面这样却不行：

　　    function doDumbTimer()
　　    {
　　        var timer1 = setTimeout("window.document.the_form_2.the_text_2.value='3 seconds!';",3000);
　　        var timer2 = setTimeout("window.document.the_form_2.the_text_2.value='6 seconds!';",3000);
　　        var timer3 = setTimeout("window.document.the_form_2.the_text_2.value='9 seconds!';",3000);
　　    }

　　    试一下这个错误的定时代码看看会发生什么？

　　    请注意当你等了三秒钟，三个定时信息之一神秘地出现在文本框里，然后就停在那儿。在上面的不好的代码中，每个setTimeout都连续地执行，（就是“从现在开始，三秒钟后显示‘三秒'，三秒钟后显示‘六秒'，三秒钟后显示‘九秒'”）。所以当三秒钟以后，三件事儿都发生了，你得到的正好是其中最后发生的结果----当然不是你希望的结果。

　　    你想到这个问题了吗？

　　    好，答案并非那么简单。你无法象上面的那个例子那样，只用一个函数，就能够每隔两秒就改变文本框的内容，象这样：

　　    function theTimer()
　　    {
　　        var timer1 = setTimeout("changeTextBoxTo(2);",2000);
　　        var timer2 = setTimeout("changeTextBoxTo(4);",4000);
　　        var timer3 = setTimeout("changeTextBoxTo(6);",6000);
　　        var timer4 = setTimeout("changeTextBoxTo(8);",8000);
　　        var timer5 = setTimeout("changeTextBoxTo(10);",10000);
　　        .
　　        .
　　        .
　　    }

　　    因为，好，你可以看出为什么不行：如果你想用这种方法让某件事无限循环下去，你必须有无限多行的代码。相比起其它问题，比如敲得你肩酸背痛来说，光是下载一个包含了无限多行javascript的页面就需要太长的时间，所以，这种方法根本就谈不上是一种选择。

　　    这个也不行，虽然它看起来更酷一些：

　　    function theTimer()
　　    {
　　        the_time = 0;
　　        hellIsHot = true;

　　        while (hellIsHot == true)
　　        {
　　            the_time += 2;
　　            var timer = setTimeout("changeTextBoxTo(the_time);", the_time*1000);
　　        }
　　    }

　　    请把程序研究一会，看看会得到什么结果。但不要尝试去运行它，否则结果会使你很不愉快。让我们在“while"循环中走几趟：

　　    第一遍
　　    while (hellIsHot == true) : 是的地狱还是热的。
　　    the_time += 2 : 所以现在 the_time = 2
　　    var time = setTimeout("changeTextBoxTo(2);", 2000) :
　　    所以, 从现在开始两秒后, 文本框变成了“2.",这正是我们想要的结果。

　　    第二遍
　　    while (hellIsHot == true) : 确实，地狱还是热的
　　    the_time += 2 : 所以现在 the_time = 4

　　    var time = setTimeout("changeTextBoxTo(4);", 4000) :
　　    所以, 从现在开始四秒后, 文本框变成了“4.",很好。

（编辑：十堰站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/2

尾页