JAVASCRIPT 浏览器对象

最新推荐文章于 2020-12-07 11:47:28 发布

Estom_yin

最新推荐文章于 2020-12-07 11:47:28 发布

阅读量328

点赞数

分类专栏： html&css&javascript 文章标签：计时器

本文链接：https://blog.csdn.net/Estom_yin/article/details/51890683

版权

html&css&javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

>浏览器对象

>>以浏览器为对象，调用浏览器对象的属性和方法。如：window.setinterval(clock, 100) and widow.navigator，可以省略window。

>>函数的参数是另外一个函数时，只写另外一个函数的名字（待定）。

>计时器

>>分类：

一次性计时器：尽在指定的延迟时间后触发一次行为

间隔性触发计时器：每隔一定时间触发一次

>>常用函数：

setTimeout(代码行为，延时时间)：制定的毫秒数后调用函数或计算表达式

clearTinmeout(时间设定函数的ID)：取消有setTimeout()设置的timeout

setIntervel(代码，交互时间)：按照指定的周期来调用函数或计算表达式

代码：要调用的函数或执行的代码串（行为）；交互时间：周期性执行行为的时间；返回值为函始时钟的id值。

clearInterval(时间设定函数的ID)：取消由setIntervel()设置的timeout

<span style="font-size:18px;"><body>
    <input type="text" id="clock" size="50">
    <script type="text/javascript">
        function clock(){
            var time = new Date();
            var attime = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
            document.getElementById("clock").value = attime;
            
        }
        setInterval(clock, 100);
    </script>
</body></span>

//实现了简单的时间及时输出

<span style="font-size:18px;"><body>
    <input type="text" id="clock">
    <input type="button" id="istart" value="Start">
    <input type="button" id="istop" value="Stop">
    <script type="text/javascript">
        var setid;
        var time;
        var attime;
        function clock(){
            time = new Date();
            attime = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
            document.getElementById("clock").value = attime;
        }
        var istart = document.getElementById("istart");
        istart.onclick = function(){
            setid = setInterval(clock, 100);
        }
        var istop = document.getElementById("istop");
        istop.onclick = function(){
            clearInterval(setid);
        }
    </script>
</body></span>

根据setIntervel返回的id值取消时钟的设置。

<span style="font-size:18px;"><body>
    <input type="text" id="inum">
    <input type="button" id="ialt" value="Start">
    <script type="text/javascript">
        var inum = document.getElementById("inum");
        var ialt = document.getElementById("ialt");
        ialt.onclick = function () {
            setTimeout("inum.value = 1", 1000);
            setTimeout("inum.value = 2", 2000);
            setTimeout("inum.value = 3", 3000);
            setTimeout("inum.value = 4", 4000);
            setTimeout("alert('666')", 5000);
        }
    </script>
</body></span>

//实现了settimeout的函数的调用，注意，器低一个参数值可以是函数，也可以是普通行为，上述代码即为普通行为，需要加引号，而函数只需要写函数名，没有参数的话可以不加括号。

<span style="font-size:18px;"><body>
<input type="text" id="count">
<input type="button" id="istart" value="Start">
<input type="button" id="istop" value="Stop">
<script type="text/javascript">
    var seti;
    var num = 0;
    function startCount(){
        document.getElementById('count').value = num;
        num = num + 1;
        seti = setTimeout("startCount()", 1000);
        
    }
    var istart = document.getElementById("istart");
    istart.onclick = function (){
        startCount();
    }
    var istop = document.getElementById("istop");
    istop.onclick = function(){
        clearTimeout(seti);
    }
</script>
</body></span>

//实现了按秒计数器，可以开始和结束。

PS：有一个不明白的地方，在代码执行的时候，发现setIntervel（clock，1000）；setTimeout（“startCount()”, 1000）两个时间设定同样是调用两个函数，前者直接使用了函数名，而后者却有引号，函数名和括号。为什么？

Estom_yin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
**JAVASCRIPT** 浏览器对象

有一个不明白的地方，在代码执行的时候，发现setIntervel（clock，1000）；setTimeout（“startCount()”, 1000）两个时间设定同样是调用两个函数，前者直接使用了函数名，而后者却有引号，函数名和括号。为什么？setTimeout(代码行为，延时时间)：制定的毫秒数后调用函数或计算表达式clearTinmeout()：取消有setTimeout()设置的timeoutsetIntervel(代码，交互时间)：按照指定的周期来调用函数或计算表达式代码：要调用的函
复制链接

扫一扫