JS setTimeout和setInterval

来源:互联网 发布:苹果mac系统更新不了 编辑:程序博客网 时间:2024/05/22 06:59
<!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>
原创粉丝点击