javascript 跑马灯

1.看了写跑马灯的教程案例，隔了段时间自己写了一个简单的跑马灯。将过程中遇到的问题特此记录下来

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<title>简&nbsp;陋&nbsp;的&nbsp;管&nbsp;理&nbsp;后&nbsp;台&nbsp;</title>

</head>

<body>

<input type='button' value='stop TitleLoop' id='stoploop'/>

<script src='C:\Users\wujy1\Desktop\html\js\jquery-3.1.1.min.js'></script>

<script>

    function TitleLoop(){    //实现标题循环

        var Title=$('title').text();

        FirstWord=Title[];         //保存字符串第一个字符

        Title=Title.substring();   //将字符串第一个字符截取掉

        /*

        document.title=Title+FirstWord;  使用该方法比较占用内存。例如：

                var lang = "Java";

                lang = lang + "Script";

                首先创建一个能容纳10个字符的新字符串，然后在这个字符串

                中填充“Java”和“Script”,最后一步是销毁原来的字符串“Java”

                和“Script”,因为这两个字符串已经没用了。但是在低版本的浏

                览器(如IE6)中，字符串拼接速度是很消耗一个性能的过程。

        */

        var arry=Array(Title,FirstWord);  //将新字符串和第一个字符定位为数组(要注意顺序)，使用join方法拼接起来

        Title=arry.join("");

        $('title').text(Title);    //更改title内容

    }

        var loop=setInterval("TitleLoop()",);   //启用循环

        $('#stoploop').click(function(){clearInterval(loop);}); //结束循环    

</script>

</body>

</html>

问题：

　　当我要结束循环，使用以下代码并不可以结束进程：

$('#stoploop').click(function(){clearInterval(setInterval("TitleLoop()",500));})

　　查看clearInterval说明：clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

　　这时候使用：

var loop=setInterval("TitleLoop()",500);

console.log(loop);  #返回1

console.log(setInterval("TitleLoop()",500)) #返回2

console.log(setInterval("TitleLoop()",500)) #返回3

　　所以关闭循环必须将循环赋值给变量，然后关闭掉这个循环。

　　这时候猜测，每当定义一个 setInterval()时，他的ID值就会加1.验证下：

巴特西

javascript 跑马灯

最新文章

热门文章