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

  • Z时代
  • 2024-01-10
  • 分类：综合

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>

以上是 Vue实现跑马灯轮播文字效果 的全部内容， 来源链接： utcz.com/z/380660.html

回到顶部