JavaScript进阶教程(第三课第二部分)第1/2页

要使定时器循环工作你需要写一个函数实现循环调用。这里是一个例子：

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);
    }

这里用到的定时器就是上一页所用的定时器。当用户点击按钮时就调用该函数。该函数将the_count的当前值写到文字框中。然后the_count增加2，则开始调用函数自身。文字框中的数值也相应更新，the_count在增加2， 则再次调用函数自身。在等待的这两秒期间浏览器则可以执行其他的同步工作。the_count一增加2就执行另一次setTimeout()。你不用担心会造成内存崩溃，因为在给定时间内只有一个setTimeout()在执行。

而无限的"while" 循环则会锁定浏览器的工作，在执行该循环的过程中浏览器不能同时执行别的任何指令。而setTimeout则可以使循环的间隙中让浏览器执行别的工作。

如何取消setTimeout？

现在你已经学习了如何设置一个无限循环。但是你必须懂得如何终止循环。其指令就是clearTimeout。上例中定时器还有下面这个表单元素：

<input type="button" value="stop timer" onClick="clearTimeout(the_timeout);">

点击这个按钮就可以终止定时器。指令是clearTimeout()，其实很简单，如果你这样设置setTimeout，the_timeout = setTimeout("some javascript",3000);

你可以这样取消定时器：clearTimeout(the_timeout);

很简单，对吧？下面我们看一个复杂循环定时器，一个可以报告时间的定时器。

现在时间是：

点击“启动时钟”则时钟开始运行。它从你的计算机中读取时间并每半秒更新一次文字框中的显示。这个例子通过一个自调用的函数设置了一个定时器。同时这个例子可以让你了解一点Date对象的功能。当讲解cookies时，我提到过Date对象。

以下是代码：
    function writeTime() {
        // 获得日期对象
        var today = new Date();

// 从对象中获得信息
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();

// fixTime 使分和秒可以正常显示
        // 对于小于10的数字则在该数字前加一个0
        minutes = fixTime(minutes);
        seconds = fixTime(seconds);

//将时间字符串组合在一起并写出
        var the_time = hours + ":" + minutes + ":" + seconds;
        window.document.the_form.the_text.value = the_time;

//每半秒钟执行一次该函数
        the_timeout= setTimeout('writeTime();',500);
    }

function fixTime(the_time) {
        if (the_time <10)
        {
            the_time = "0" + the_time;
        }

return the_time;
    }

我们仔细研究一下代码。

var today = new Date();
    正如new Array() 可以生成一个新的数组，你可以可以用new Date() 生成一个新的日期对象。生成对象之后，你可以对其提出你的问题。你生成的新的日期对象的括号中间没有任何参数， 但JavaScript会查询计算机的始终并用其生成新的日期对象。现在我们的日期对象名为"today" ，我们可以从中提取相应的信息。

var hours = today.getHours();
    这条用于获得当前的小时值。它是军队格式的时间，即，如果当前时间是下午两点，则它返回的值是14。getHours()是Javascript的日期对象内置的方法调用。

var minutes = today.getMinutes(); var seconds = today.getSeconds();
    这几行原理和getHours()类似。

minutes = fixTime(minutes);
    getMinutes存在一些问题，如果分钟是11:01, getMinutes将返回 "1"。时钟的显示格式可不是这样，它应该显示为“01”。fixTime函数就是用于执行纠正显示格式的功能。

下面两行将字符串组合在一起并显示出来，
    the_timeout = setTimeout('writeTime();', 500);

设置每半秒执行一次该函数的循环。

下一讲我们将学习如何在定时器中加入变量。

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • JavaScript进阶教程(第三课)第1/2页

    事件的定时以及浏览器的识别 随着我们所掌握的JavaScript日渐丰富,我们可以编制出越来越复杂的应用程序.上次的课程中我们学习了如何利用JavaScripts编写Cookies.今天我们将学习如何加入定时功能.给时间定时的能力在浏览器中非常有用,而在动态HTML应用中发挥更大的功用. 你可能会注意到动态HTML可以在页面中移动不同的内容.在JavaScript中将某个物体在屏幕中移动需要用到一个循环(loop),用循环的功能使物体随着时间推移移动.但是你如何告诉JavaScript将某个物体

  • JavaScript进阶教程(第四课第一部分)

    在以前的课程中,我们学习了对文本和字符串的各种操作,今天我们专注于两种不同的数据类型:图象和对象.学完这一课,你将知道如何: 使用JavaScript来加速图象交换. 创建你自己的对象来使脚本易于理解. 使用关联数组来快速存取脚本中的每一个对象. 使用JavaScript做图象变换的一个主要问题是,它直到需要换图时才去告诉浏览器下载那张图象.如果你有一张大的图象,想在鼠标滑过一副图象时调出来,浏览器得临时下载这张图,这可能会花一定时间从而使滑动效果大打折扣. 如果你的连接速度较慢,而你要调入的是

  • JavaScript DOM进阶方法

    DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名                        说明 Node                 表示所有类型值的统一接口,IE不支持; Document             表示文档类型; Element              表示元素节点类型; Text                 表示文本节点类型; Comment           

  • JavaScript进阶练习及简单实例分析

    JavaScript进阶练习及简单实例分析

    当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • JavaScript进阶教程(第二课续)第1/2页

    现在你已经掌握了先进的字符串处理和相关数组概念,该是我们打开神奇的cookie魔瓶的时候了．cookie是记录访问你的站点的人的信息,它其实驻留在用户的硬盘上,即使用户已经离开你的站点,cookie在用户的硬盘上仍然存在,如果该用户再次返回你的站点,则该cookie就会被一起发回到你的服务器中,便于你统计和处理重复到访者的信息． 下面我们看一看一个cookie应用的典型例子,我们在一个网页中设置cookie,然后通过别的网页读取它．在使用该例子的时候,想想如果没有cookie,你如何做到这一点．

  • JavaScript进阶教程(第二课)第1/3页

    今天我们将学习一项很有用而且很有趣的内容:cookies - 这是用来记录访问过你的网页的人的信息.利用Cookies你能记录访问者的姓名,并且在该访问者再次访问你的站点时向他发出热情的欢迎信息.你还可以利用cookie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢,cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容. 只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私),cookies还是相当实用得.所以我要向你们介绍cookies的工作原理,但是在

  • JavaScript中split与join函数的进阶使用技巧

    Javascript拥有两个相当强大而且受开发者喜爱的函数:split 与join 俩对立的函数.这俩函数能让string与array两种类型互换,也就是数组能被序列化为字符串,反之亦然.我们能把这俩函数发挥得淋漓尽致.下面就来探索里面的一些有趣的应用, 首先介绍一下这两个函数: String.prototype.split(separator, limit) separator把字符串分割为数组,可选参数limit定义了生成数组的最大length. "85@@86@@53".spli

  • JavaScript进阶教程(第一课)第1/3页

    欢迎您继续学习Javascript进阶教程.在此之前我们已经学习了Javascript初级教程.在这一阶段的学习中我们将继续学习在上次的教程中还没有来得及谈及的问题.我还将向你们展示Javascript的许多神奇功能,使你能够制作真正对多媒体应用程序.     以下是我们将涉及的内容:     给变量赋值     If-then语句     For和while循环     编写你自己的函数     打开及控制窗口     读写HTML 表单     应用数组     控制图片转换     如果这

  • JavaScript进阶教程(第三课第二部分)第1/2页

    要使定时器循环工作你需要写一个函数实现循环调用.这里是一个例子: 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);    } 这里用

  • JavaScript初级教程(第三课)第1/2页

    本课的目的是调用目标名,本例中即窗口名yer_new_window. 既然我们已经简单的重温了一下href目标, 那么该开始学习在JavaScript中打开窗口. 在HTML中打开窗口应用极为普遍,但也有一些缺陷:用户浏览器决定窗口看起来是什么样的,你左右不了其窗口的大小及式样.幸运的是,JavaScript给了你这种控制权. 看一看其原由: window.open("URL","name","features"); 本语句以你调用时采用的第一个

  • javascript asp教程第三课 new String() 构造器

    javascript asp教程第三课 new String() 构造器

    开始:new String() 是本课程计划中较早出现的另一个让人感觉到奇怪的地方.但和转义字符一样, new String()是创建一个成功的asp javascript应用的必须元素.下面是本课的两个脚本:下面是实际上承担重量的脚本:行为中的new String( ):现在我们来看看下面的asp行.Request.Form 我们将在后面有独立的课程来讲授.下面才是我们现在要讲的重点.在request.form中所持有的数据(来自用户的数据)并不是一个javascript数据类型.相反,它是一

  • JavaScript进阶教程之函数的定义、调用及this指向问题详解

    目录 前言 一:函数的定义 1.1 命名函数 1.2 匿名函数 1.3 利用 new Function() 声明函数 1.4 重要结论 二:函数的调用 2.1 普通函数调用 2.2 立即执行函数调用 2.3 对象内方法调用 2.4 构造函数调用 2.5 事件函数的调用 2.6 定时器函数的调用 三:各类函数的内部this指向问题 总结 前言 这篇文章开始我们函数的进阶篇,和我们JavaScript基础学的函数有了很多拓展,这篇文章首先我们从函数的定义,调用,及其 this指向 来一个总结. 一:

  • JavaScript初级教程(第四课)第1/2页

    我们已了解变量可是数字.字符串及对象参数.还有一个Javascript的重要部分:数组.     数组是一种列表.各种列表比如名单.URL以颜色列表都可以存储在数组中.      这里我们生成颜色的数组:     var colors = new Array("red","blue","green");     现在你就有了一个数组,你能对它做什么呢?数组的优点在于数组中的各个元素可以通过数字调用.第一个元素的数字是0,可以用以下方式调用:   

随机推荐