zoukankan      html  css  js  c++  java
  • vue 跑马灯效果

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <div>{{msg}}</div>
                <button @click="lang">浪起来</button>
                <button @click="stop">别浪</button>

            </div>
        </body>
        <script src="vue.js"></script>
        <script>
            var vm=new Vue({
                el:'#app',
                data:{
                    msg:'猥琐发育,别浪~~~~',
                    intervalId:null
                },
                methods:{
                    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)
                        this.intervalId=null;
                    }
                }})
        </script>

    </html>
  • 相关阅读:
    二分插入排序
    LEETCODE 返回两个正序数组的 中位数
    4的幂 算法
    leetcode 两个单链表两数相加
    KMP(The Knuth-Morris-Pratt Algorithm)
    Java Case Interview one
    AWK SED命令 简单入门
    Problem Fix List(always update)
    mysql存储过程快速上手
    java while和switch-case循环
  • 原文地址:https://www.cnblogs.com/tiandlsd001/p/15242028.html
Copyright © 2011-2022 走看看