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

所属分类: 网络编程 / JavaScript 阅读数: 1876
收藏 0 赞 0 分享

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

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

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

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

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多