跑马灯效果的实现

1：给【浪起来】按钮绑定一个点击事件
2：在按钮的事件处理函数中，写相关的业务逻辑代码
a:拿到要滚动的字符串
b:调用字符串substring方法来进行字符串的截取操作。（把第一个字符截取出来，放到最后一个位置即可）
c:为了实现点击一个按钮自动截取的功能，需要把2步骤放入一个定时器中

1：原生js的实现

var btn1=document.querySelector("#btn1");
        var btn2=document.querySelector("#btn2");
        var captions=document.getElementById('captions');
        var time=null;
         btn1.onclick=function(){
            if(time!=null) return;
            time=setInterval(function(){
                var text=document.getElementById('captions').innerHTML; 
                var start=text.substring(0,1);
                var end=text.substring(1);
                captions.innerHTML=end+start;
            },400)
         }
         btn2.onclick=function(){
            clearInterval(time);
            time=null;
         }

2:Vue实现

<div id="app">
       <input type="button" value="浪起来" @click="lang">
       <input type="button" value="低调" @click="stop">
       <h4>{{msg}}</h4>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script>
    //注意：在vm实例中，如果想要调用 data上的数据，或者想要调用methods中的方法，
    //必须通过this.数据属性名  或this.方法名 来进行访问,
    //这里的this，就表示我们new出来的vm实例对象
    //
    //
    //vm实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，
    //就会自动把 最新的数据 从data上同步到页面中去
    //好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM
        var vm=new Vue({
            el:'#app',

            data:{
                msg:'猥琐发育别浪~~',
                intervalId:null//data上定义 定时器Id
            },

            methods:{
                //lang:function(){}
                lang(){
                    if(this.intervalId !=null) return;
                    this.intervalId=setInterval(()=>{
                        var start=this.msg.substring(0,1)
                        var end=this.msg.substring(1)
                        this.msg=end+start
                    },400)  
                },
                stop(){
                    clearInterval(this.intervalId)
                    //每当清楚了定时器之后，需要从新把intervalId 置为 null
                    this.intervalId=null;
                }
            }
        })
    </script>