Dom操作--跑马灯效果

这里给园友们演示的是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(0);

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

      document.title=remaintitle+firsttitle;

    }

    

    //左转,字符串拼接

    function leftrun(){

      var title=document.title;

      var firsttitle=title.charAt(0);

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

      document.title=remaintitle+firsttitle;

    }

    //右转,字符串拼接

    function rightrun(){

      var title=document.title;

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

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

      document.title=righttitle+remaintitle;

    }

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

    var leftclearId;

    var rightclearId;

    //左滚方法

    function leftsetInter(){

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

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

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

      clearInterval(rightclearId);

    }

    //右滚方法

    function rightsetInter(){

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

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

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

      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)