跑马灯效果实现

一.js实现跑马灯

1.效果图

视频上传不了，只能看图片了

2. 设计思路

• 使用截取字符串的方法，首先获取文本的值，再分别截取文本的第一个字符串和剩余的字符串，然后重新拼接一个新的字符串，最后把这个新字符串赋值给文本，代码如下：

 var value=cont.innerHTML;
 var start=value.substring(0,1);//截取第一个字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一个新的字符串
 cont.innerHTML=result;//把新字符串赋值给p标签

• 使用计时器setInterval( )方法来设置时间重复执行

 t=setInterval(function(){
            var value=cont.innerHTML;
            var start=value.substring(0,1);//截取第一个字符串
            var end=value.substring(1);//截取剩余的字符串
            var result=end+start;//拼接一个新的字符串
           cont.innerHTML=result;//把新字符串赋值给p标签
         },500);

• setInterval( )返回一个整数类型的数，然后把这个数赋值给clearInterval( )让计时器停止

  clearInterval(t);

• 然后点击开始按钮，跑马灯走起；点击停止按钮，跑马灯停止

 start.onclick=function(){
         clearInterval(t);//防止多次点击，而创建多个计时器
         t=setInterval(function(){
            var value=cont.innerHTML;
            var start=value.substring(0,1);//截取第一个字符串
            var end=value.substring(1);//截取剩余的字符串
            var result=end+start;//拼接一个新的字符串
           cont.innerHTML=result;//把新字符串赋值给p标签
         },500);  
     }
     stop.onclick=function(){
         clearInterval(t);
     }

3. 整体代码

    
    
    
    


    

        
生命永无止境~~~
        跑马灯走起
        跑马灯停止
    
  
  

二. vue实现跑马灯

话不多说，直接上代码了：