• 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>
  • 相关阅读:
    Shell中的特殊变量和结构
    自由的Debian
    关于系统定制的一些链接
    超出两行显示省略号
    json转换
    区分LocalStorage和偏好数据
    去除谷歌浏览器中的默认文本框样式
    js访问xml
    js执行跨域请求
    mvc通过controller创建交互接口
  • 原文地址:https://www.cnblogs.com/rampb/p/3394056.html
Copyright © 2020-2023  润新知