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 跑马灯的更多相关文章

  1. JavaScript “跑马灯”抽奖活动代码解析与优化(二)

    既然是要编写插件.那么叫做"插件"的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率.那么叫做插件的东西应该具有哪些基本特征呢?让我们来总结一下: 1.J ...

  2. JavaScript “跑马灯”抽奖活动代码解析与优化(一)

    最近的项目中做了一个"跑马灯"的抽奖特效插件.上篇文章已经分享过html和css 的相关知识.这篇文章主要分享一些 JavaScript 相关的知识.这几天在写这篇文章的时候,也顺 ...

  3. javascript跑马灯抽奖

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. javascript小记五则:用JS写一个图片左右自由滚动的“跑马灯”效果

    之前看了很多百度搜索出的东西,十个有九个是不能实用的,个个讲的都不详细,今天详细给大家讲解下关于这个图片“跑马灯”滚动效果,源码如下: <!DOCTYPE html PUBLIC "- ...

  5. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  6. javascript之网页跑马灯

    ---恢复内容开始--- <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. JavaScript实现文字跑马灯

    其实实现文字的跑马灯和实现图片轮播的原理是一样的. 下面是我自己实现的,文字的位置可以随便更改,效果不会变,文字的内容可以通过ajax获取,同时,可以直接用Jquery改写一下,很方便. <!D ...

  8. jq跑马灯效果

    这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...

  9. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

随机推荐

  1. C#调用EXE

    1.问题意义 据说界面程序开发,首选C#(像lebview之类的也很好) 但是,能不能用其他语言开发核心代码,只用C#做界面?毕竟每种语言都有自己擅长的领域. 2.exe程序 比如有个example. ...

  2. 记 linux 下面初次使用的convert 工具完成拼长图功能

    今天,遇到了一个需要把大量图片合并到一个长图的功能.本来找了各种图片处理界顶顶大佬.. “PS(手动一张张 的加).光影魔术手(批处理功能没有看到拼图功能).美图秀秀(可以有个拼图,限制30张,而且需 ...

  3. 一款好用的取色工具TakeColor

    简介:TakeColor,一款还算好用的取色软件,一个很小很简洁的exe文件,无需安装 使用:打开exe文件后,使用“Alt + C” 组合键即可在鼠标悬停的位置上获取到颜色值,可以获取HTML.RG ...

  4. 使用Vuex来处理Authentication token

    https://www.cnblogs.com/chentianwei/p/10156459.html 之前博客:建立了一个app.使用loacal storage 来管理tokens(通过clien ...

  5. SPL之Iterator和ArrayAccess的结合使用

    <?php namespace TabControl; class MyIterator implements \Iterator, \ArrayAccess { private $data = ...

  6. 获取在线python 文档

    window cmd    :python -m pydoc -p 8888

  7. CentOS下yum命令详解

    CentOS下yum命令详解 Yum: 即Yellowdog Update Modifier,是一种基于rpm的包管理工具 yum命令使用示例 显示yum仓库 显示所有仓库 yum repolist ...

  8. 将本地 项目文件托管到 github

    1.新建一个本地 repository文件夹 2.将想要 托管的项目或文件 复制到repository 文件夹下 2. 右键 git bash here 输入命令 git init 生成本地仓库 4. ...

  9. java利用EasyPoi实现Excel导出功能

    easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员 就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出,通过简单的注解和模板 语言( ...

  10. C++笔试题总结

    1.C和C++的特点与区别? 答:(1)C语言特点:1.作为一种面向过程的结构化语言,易于调试和维护: 2.表现能力和处理能力极强,可以直接访问内存的物理地址: 3.C语言实现了对硬件的编程操作,也适 ...