这里给园友们演示的是Dom操作实现跑马灯效果，相信我们很多人都用Winform实现过跑马灯效果，其中的关键就是Tirm控件，那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码的功能。

利用Dom操作实现跑马灯有两个思路：
1、定义一个记录方向的变量，默认是left（var dir="left";），然后通过点击按钮传参改变dir的值。这里只有一个setInterval计时器方法
2、写两个setInterval方法，分别控制跑马灯的方向，但是当我们改变跑马灯的方向时要停止另一个方向setInterval计时器方法

<html>

  <head>

    <title>跑马灯效果!!!</title>

    <script type="text/javascript" language="javascript">

    var timeId="";

    //默认跑马灯效果

    function run(){

      var title=document.title;

      var firsttitle=title.charAt();

      var remaintitle=title.substring(,title.length);

      document.title=remaintitle+firsttitle;

    }

    //左转，字符串拼接

    function leftrun(){

      var title=document.title;

      var firsttitle=title.charAt();

      var remaintitle=title.substring(,title.length);

      document.title=remaintitle+firsttitle;

    }

    //右转，字符串拼接

    function rightrun(){

      var title=document.title;

      var righttitle=title.substring(title.length-,title.length);

      var remaintitle=title.substring(,title.length-);

      document.title=righttitle+remaintitle;

    }

    //定义变量记录开启的计时器

    var leftclearId;

    var rightclearId;

    //左滚方法

    function leftsetInter(){

      //定义变量记录当前开启的计时器ID

      leftclearId=setInterval('leftrun()',);

      //清除正在运行的计时器

      clearInterval(rightclearId);

    }

    //右滚方法

    function rightsetInter(){

    //定义变量记录当前开启的计时器ID

      rightclearId=setInterval('rightrun()',);

      //清除正在运行的计时器

      clearInterval(leftclearId);

    }

    </script>

  </head>

  <body>

    <input type="button" value="跑马灯效果" onclick="timeId=setInterval('run()',500)"/>

    <input type="button" value="停止" onclick="clearInterval(timeId)"/><br/><br/><br/>

    <input type="button" value="向左滚动" onclick="leftsetInter()"/>

    <input type="button" value="向右滚动" onclick="rightsetInter()"/>

  </body>

</html>

Dom操作--跑马灯效果的更多相关文章

  1. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  2. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  3. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  4. 【Android】TextView跑马灯效果

    老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...

  5. Android 自定义View跑马灯效果（一）

    今天通过书籍重新复习了一遍自定义VIew,为了加强自己的学习,我把它写在博客里面,有兴趣的可以看一下,相互学习共同进步: 通过自定义一个跑马灯效果,来诠释一下简单的效果: 一.创建一个类继承View, ...

  6. vue学习第二天：Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  7. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  8. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  9. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

随机推荐

  1. Struts一张图

  2. @ContextConfiguration注解说明

    @ContextConfiguration Spring整合JUnit4测试时,使用注解引入多个配置文件单个文件 @ContextConfiguration(Locations="../ap ...

  3. Citrix服务器虚拟化之三十 XenApp 6.5发布流式应用程序

                                        Citrix服务器虚拟化之三十 XenApp 6.5发布流式应用程序   XenApp可发布以下类型的资源向用户提供信息访问,这 ...

  4. android之自定义ViewGroup和自动换行的布局的实现

    viewgroup简单说就是可以装view的view.今天遇到一个问题,就是需要一个可以自动根据一行中view的宽度自动换行的布局,网上 找了下,没有相关的例子,但是找到了思路:自定义一个viewgr ...

  5. Log4j配置具体解释

    #配置Logger #--log4j.rootLogger=[level], appenderName1, appenderName2, ... #level分为: # FATAL : 0 # ERR ...

  6. C#异常之（已有打开的与此 Command 相关联，已有打开的与此命令相关联的 DataReader，必须首先将它关闭。）

    异常提示:“System.InvalidOperationException”类型的异常在 System.Data.dll 中发生,但未在用户代码中进行处理  其他信息: 已有打开的与此 Comman ...

  7. c++匿名类—指针

    1 摘自网上 2代码实例 #include <iostream> #include <list> #include <iterator> #include < ...

  8. Linux 下mysql忘记root密码解决方法

    忘记root密码怎么办:1.关闭数据库2.使用-->mysqld_safe --skip-grant-tables &--<启动数据库3.使用空密码进入数据库(mysql命令后直接 ...

  9. bit,byte,char,string区别与基本类型认识

    bit.byte.位.字节.汉字的关系 1 bit     = 1  二进制数据        1 byte  = 8  bit        1 字母 = 1  byte = 8 bit       ...

  10. c语言，strcmp(),字符串比较，看Asic 码，str1>str2，返回值 > 0；两串相等，返回

    #include<stdio.h> #include<string.h> int main() {  char *buffer1="aaa",*buffer ...