这里给园友们演示的是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. iOS开发 落地消息多的处理办法（仅供参考）

    1.首先要知道一点,你的消息储存是用数据库储存的! 看了一下微信和qq的消息处理,一般情况下第三方(亲加,容云,环信都会有本地的数据库)处理过的! 但是我发现,最近一个需求要求开发@"消息已 ...

  2. vc++ CreateFile报错，返回123

    //hFile = CreateFile("D:\dev\fmt\res\face1.png", 0, FILE_SHARE_READ, NULL, OPEN_EXISTING, ...

  3. oracl使用DataBase Configuration Assistant创建、删除数据库

    原文:oracl使用DataBase Configuration Assistant创建.删除数据库 可以使用DataBase Configuration Assistant来创建一个心得数据库.Da ...

  4. IOS开发之带格式的文本

    有时可能会遇到这样的问题,一个label中设置的文本含有2种以上不同的格式,又不能把它拆解为两个label来显示,这时用NSMutableAttributedString可以很好的解决问题. 示例如下 ...

  5. Hyper-V性能监控_CPU

    Hyper-V性能监控: 物理CPU: \Hyper-V Hypervisor Logical Processor(*)\%Total Run Time %Total Run Time :处理器处理来 ...

  6. MS-SQLSERVER中的MSDTC不可用解决方法

    今天在本地机直接在触发器里更新还有一台服务器数据时出现: MSDTC不可用  解决的方法:  在windows控制面版-->管理工具-->服务-->Distributed   Tra ...

  7. velocity-字母序号 list

    版权声明:本文为博主原创文章,未经博主允许不得转载. [需求] 遍历一个list,同时需要在每个item前面显示字母序号,例如A,B,C,D [代码] #set($zimu = ["A&qu ...

  8. 字符的截取方法使用的是Substring 和三目运算符

    substring(0,m.title.length>11?11:m.title.length)

  9. 安装tensorflow

    官网:http://tensorflow.org/安装步骤:1.sudo apt-get install python-pip python-dev python-virtualenv 3    co ...

  10. 8.LNMP环境的配置

    LNMP环境的配置 参照文档:https://oneinstack.com/install/ 安装文件位置:/data/soft: ```yum -y install wget screen pyth ...