javascript 跑马灯

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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[0];         //保存字符串第一个字符
        Title=Title.substring(1);   //将字符串第一个字符截取掉
        /*
        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()",500);   //启用循环
        $(#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 跑马灯的主要内容,如果未能解决你的问题,请参考以下文章

怎么做成不间断的跑马灯效果??/

关于一个用javascript做的跑马灯的效果

JS实战:仿LED跑马灯效果

vue制作滚动条幅-跑马灯效果实例代码

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象