跑马灯

作者: 小透明进击战 | 来源:发表于2019-06-18 18:10 被阅读0次

GitHub上受欢迎的Android UI Library(下)
Android 基础 UI 之 TextView
textview - 跑马灯
Kevin Learn Android：TextView
TextView漏的知识点
leetcode ascii码汇总
iOS 跑马灯的实现
Android实现跑马灯效果
流水灯(2016-04-03)
flutter跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="跑起来" v-on:click="run">
        <input type="button" value="停下来" @click="stop">
        <p v-cloak>{{ msg }}</p>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"1111111111111111111~~~~~",
                //将定时器的id写在这里可以作为全局变量
                timeid:null
            },
            methods:{
                
            //     run:function(){
            //         var _this=this;
            //         var timeid=setInterval(function(){
            //            var start=_this.msg.substring(0,1);
            //            var end=_this.msg.substring(1);
            //            _this.msg=end+start;
            //        },300) 
            // },
            //ES6的写法
                run(){
                    //箭头函数就是把内部的this指向外部的this
                    if(this.timeid!=null)  return
                    this.timeid=setInterval(()=>{
                       var start=this.msg.substring(0,1);
                       var end=this.msg.substring(1);
                       this.msg=end+start;
                   },200) 
            },
                stop(){
                    clearInterval(this.timeid);
                    this.timeid=null

                }
            }    
        });

    </script>
    
</body>
</html>