其他分享
首页 > 其他分享> > Vue实现跑马灯轮播文字效果

Vue实现跑马灯轮播文字效果

作者:互联网

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>跑马灯轮播</title>
   <script src="js/vue.js"></script>
</head>

<body>
        <div id="app" align="center">
        <input type="button" value="我飘过" @click="start" >
        <input type="button" value="腿断了" @click="stop">
       <h4>{{msg}}</h4>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',  
            data: {  

                msg: '我是跑马灯,你过来呀',
                //定时器
                intervalId: null
            },
            methods: {   
                start(){
                        //如果当前为start,再点击start,则无效,只有当点击stop后再点击start才有效
                        if(this.intervalId !=null)
                        return;
                        //启动计时器
                        this.intervalId = setInterval(()=>{
                        var start = this.msg.substring(0,1);
                        // 获取到 后面的所有字符
                        var end  = this.msg.substring(1);
                        //前后重新拼接得到新的字符串,并赋值给 this.msg
                        this.msg = end + start;
                    },200)//200为间隔时间
                },
                stop(){
                    //清除定时器
                    clearInterval(this.intervalId)
                    //将定时器id重置为null
                    this.intervalId = null;
                }
            }
        })

    </script>
</body>

</html>

 

<!DOCTYPE html>
<html>
<head>    <meta charset="UTF-8">    <title>跑马灯轮播</title>   <script src="js/vue.js"></script></head>
<body>        <div id="app" align="center">        <input type="button" value="我飘过" @click="start" >        <input type="button" value="腿断了" @click="stop">       <h4>{{msg}}</h4>    </div>    <script>        var vm = new Vue({            el: '#app',              data: {  
                msg: '我是跑马灯,你过来呀',                //定时器                intervalId: null            },            methods: {                   start(){                    //如果当前为start,再点击start,则无效,只有当点击stop后再点击start才有效                        if(this.intervalId !=null)                        return;                        //启动计时器                        this.intervalId = setInterval(()=>{                        var start = this.msg.substring(0,1);                        // 获取到 后面的所有字符                        var end  = this.msg.substring(1);                        //前后重新拼接得到新的字符串,并赋值给 this.msg                        this.msg = end + start;                    },200)//200为间隔时间                },                stop(){                    //清除定时器                    clearInterval(this.intervalId)                    //将定时器id重置为null                    this.intervalId = null;                }            }        })
    </script></body>
</html>

 

标签:Vue,start,intervalId,var,跑马灯,文字效果,定时器,msg,null
来源: https://www.cnblogs.com/zwb-19981125/p/12896980.html