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.验证下:

时间: 2024-12-18 12:14:10

javascript 跑马灯的相关文章

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

最近的项目中做了一个"跑马灯"的抽奖特效插件.上篇文章已经分享过html和css 的相关知识.这篇文章主要分享一些 JavaScript 相关的知识.这几天在写这篇文章的时候,也顺便把自己的代码重构了一下. 这里主要是来写写自己的优化过程.俗话说: 一个程序猿的进步是从对自己的代码不满意开始的. 开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的: 1.移动端1px像素线的问题 对于设计师给我的手机端网页的设计稿都是2倍图.按照道理来说,在写网页的时候,所有

javascript跑马灯抽奖

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽奖游戏</title> 6 <style> 7 #box{ 8 width:720px; 9 margin:0 auto; 10 margin-top:20px; 11 box-shadow:0px 0px 2px #333

网页特效、Javascript代码,包括跑马灯、打字插效、不停变色的文字

 闲时收集一引动代码和大家分享 一.不停变色的文字 <HTML> <HEAD> <TITLE></TITLE> <META NAME="GENERATOR" Content="Microsoft Visual Studio"> <META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8"

js简单跑马灯案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> *{ margin: 0; padding: 0; } #bian{ width: 300px; height: 300px; margin:0 auto

跑马灯《此方法为优化方法,内容不会有闪动效果》

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title> //css部分 <style type="text/css"> #box { height: 30px; width: 800px; line-height: 30px; background-color:

跑马灯效果

html: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> body { background: #FFF; } input { background: transparent; border: none; color: #ff4332; fo

【HTML】 向网页&lt;Title&gt;&lt;/Title&gt;中插入图片以及跑马灯

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> </style> <title> 欢迎来到我的主页界面</title> <!--引入图片--> <link href="images/titleIcon.ico" rel="

jCarousel Lite 实现图片跑马灯效果

官方网站:http://www.gmarwaha.com/jquery/jcarousellite/ demo: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquer

jq跑马灯效果

这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其他一些手机正常,但一到安卓广告屏上就跑不动了:后来领导找了个jQuery插件,经测试,完美运行. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">