这里给园友们演示的是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开发：创建真机调试证书

    关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架发布问题.今天就着重说一下关于针对于苹果 ...

  2. local storage 简单应用‘’记住密码’

    前些时候一直用cookie等来进行登录页面记住面膜操作,但是由于其存储容量小等缘故,所以后来转向local storage,原理为:当用户勾选记住密码时,local storage 存储用户名密码同时 ...

  3. 【03】尽可能使用const

    1.为什么搞出const关键字? const指定一个语义约束,指定一个对象不可修改.如果一个对象不可修改,就应该说出来. 2.const与指针 const可以修饰指向之物,也可以修改指针本身.STL中 ...

  4. 【剑指Offer学习】【面试题19 ：二叉树的镜像】

    题目:请完毕一个函数,输入一个二叉树,该函数输出它的镜像. 二叉树结点的定义: /** * 二叉树的树结点 */ public static class BinaryTreeNode { int va ...

  5. win10系统调用架构分析

    http://blog.csdn.net/liuyez123/article/details/50992038

  6. 【转】补充说明：关于Beaglebone black上debian无图形界面的问题及QT的窗口示例

    有个兄弟发了一个站内的私信给我,内容如下: 时间:2014-03-05 09:08:19 大哥,debian 的BBB版本没有图形界面吧 我安装后只有文本界面 我突然意识到,我前面有没有说清楚的地方, ...

  7. iOS类初始化

    类继承下来的初始化有三种: +(void)load: +(void)initialize: -(instancetype)init:   +(void)load:会自动调用(也可手动调用),只要有引用 ...

  8. 转：通过API获取和创建 Oracle GL Account Code Combination ID’s (CCID’s)的几种方法汇总

    1] FND_FLEX_EXT.GET_COMBINATION_ID: This API Finds combination_id for given set of key flexfield seg ...

  9. java基础语法笔记

    这段时间看了一些java,急了一些笔记,记下一遍以后复习用! 2016-07-24 15:12:40 java很多语法都跟C#类似,下面列举一些不同的地方******注意***** java中的系统方 ...

  10. zoj2432 hdoj1423 最长公共上升子序列（LCIS）

    zoj2431  http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2432 hdoj 1423 http://acm.hdu. ...