JS setTimeout和setInterval

最新推荐文章于 2018-07-16 09:55:17 发布

「已注销」

最新推荐文章于 2018-07-16 09:55:17 发布

阅读量210

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/yoyov/article/details/74092015

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>javascript01.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        console.log('测试时间计时器');

        function time(){
        //获取html中节点id为spanId的节点
            var node = document.getElementById('spanId');
            node.style.fontSize = '50px';
        }

        function fn1(){
            //setTimeout()是间隔一段时间后执行某个函数，这里是等待3秒之后执行time()函数，这个方法只会执行一次，如果希望重复执行使用setInterval
            setTimeout('time()', 3000);
            //或者可以调用本身来重复执行
            //console.log(123);
            //setTimeout('fn1()', 1000);
        }

        function bigger(){
            var node = document.getElementById('spanId');
            var size = parseInt(node.style.fontSize);
            if (size) {
                node.style.fontSize = size+5+'px';
            }else{
                node.style.fontSize = '12px';
            }

        }
        var stopInt;
        function fn2(){
        //setInterval表示每隔一段时间就调用一次函数
            stopInt = setInterval('bigger()', 1000);
        }

        function fn3(){
            window.clearInterval(stopInt);
        }

    </script>
  </head>

  <body>
    <span id="spanId">click me</span><br/>
    <span onclick="fn1()">点击上面的字体变大</span><br/>
    <span onclick="fn2()">使用setInterval是字体变大</span><br/>
    <span onclick="fn3()">停止setInterval</span><br/>

  </body>
</html>