Vue實現跑馬燈輪播文字效果

本文轉載自查看原文 2020-05-15 20:42 2356

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue實現文字跑馬燈效果 marquee標簽屬性詳解（跑馬燈文字效果） vue文字跑馬燈效果 VUE之文字跑馬燈效果 vue--實現跑馬燈效果 vue基礎實現跑馬燈效果 vue實現跑馬燈效果使用JS實現圖片輪播滾動跑馬燈效果 iOS 封裝跑馬燈和輪播效果 Flutter用Swiper實現文字跑馬燈效果