master

分支 (1)

管理

管理

master

vuedemo01
/
跑马灯.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang()">
        <input type="button" value="低调" @click="stop()">

        <h3>{{message}}</h3>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',

            data: {
                message:'猥琐发育，别浪~~',
                IntervalId:null
            },
            methods: {

                lang(){

                // 判断定时器的接收值是否为空
                if(this.IntervalId!=null) return

                    this.IntervalId=  setInterval(()=>{
                            var start=this.message.substr(0,1);
                            console.log(start)
                            var end=this.message.substr(1);
                            var res=end+start;
                            this.message=res;
                    },400)

                },

                stop(){
                    clearInterval(this.IntervalId)
                    this.IntervalId=null
                }
            }
        });
    </script>
</body>

</html>