这里给园友们演示的是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. Docker - 配置国内加速器加速镜像下载。

    引言 由于网络原因,我们在pull Image 的时候,从Docker Hub上下载会很慢...所以,国内的Docker爱好者们就添加了一一些国内的镜像(mirror),方便大家使用. 配置阿里云加速 ...

  2. 使用VisualSVN Server搭建SVN服务器(转载)

    转载于http://www.cnblogs.com/greywolf/archive/2013/01/28/2879952.html 使用 VisualSVN Server来实现主要的 SVN功能则要 ...

  3. C#中异步和多线程的区别

    C#中异步和多线程的区别是什么呢?异步和多线程两者都可以达到避免调用线程阻塞的目的,从而提高软件的可响应性.甚至有些时候我们就认为异步和多线程是等同的概念.但是,异步和多线程还是有一些区别的.而这些区 ...

  4. 多点触控之MotionEvent.ACTION_MASK作用

    ACTION_MASK在Android中是应用于多点触摸操作,字面上的意思大概是动作掩码的意思吧. 在onTouchEvent(MotionEvent event)中,使用switch (event. ...

  5. [linux]date命令时间戳和时间之间的转换

    非常多时候我们查看数据库的数据,或者是一些别人系统中的数据须要用时间戳来查询.或者查询出来的结果是个时间戳. 还有时候,查询条件须要输入时间戳. 我之前的办法就是用在线工具来完毕,后来用mac了.我觉 ...

  6. 教你用笔记本破解无线路由器password

    近期非常多人问我怎么破解WiFipassword…看来大家都对免费的东西比較有兴趣.要么也可能是我太招摇了…囧… 好吧,我就写篇小小的教程,看完后,你应该可以破解大部分无线路由器password了,写 ...

  7. 编写Qt Designer自定义控件（一）——如何创建并使用Qt自定义控件

    在使用Qt Designer设计窗体界面时,我们可以使用Widget Box里的窗体控件非常方便的绘制界面,比如拖进去一个按钮,一个文本编辑器等.虽然Qt Designer里的控件可以满足我们大部分的 ...

  8. 使用DrawerLayout实现QQ5.0侧拉菜单效果

    在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...

  9. Asp.Net分页存储过程

      SQL分页语句 一.比较万能的分页: sql代码: 1 2 3 select top 每页显示的记录数 * from topic where id not in  (select top (当前的 ...

  10. css怎么引用某张图片？链接要怎么写

    总结一下 <a href="D:\xxx"> <img src="./xxx.jpg">