跑马灯效果

最新推荐文章于 2024-07-20 23:54:17 发布

aiqi4106

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量81

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuyunna/p/11276507.html

版权

<head lang="en">
    <meta charset="UTF-8">
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="开始" @click="run"/>
        <input type="button" value="关闭" @click="stop"/>
        <h4>{{ msg }}</h4>
    </div>
</body>

<script>
   var vm = new Vue({
      el:"#app",
      data:{
        msg:"跑马灯文案！跑起来~~",
        intervalId:null      //在data上定义  定时器id
       },
      methods:{
        run:function(){
          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;
           },100);
        },
        stop:function(){
          clearInterval(this.intervalId);
//        每当清除了定时器之后，需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }
  })
</script>

转载于:https://www.cnblogs.com/wuyunna/p/11276507.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aiqi4106

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跑马灯效果

<head lang="en"> <meta charset="UTF-8"> <script src="lib/vue-2.4.0.js"></script></head><body> <div id="app"> <input type...
复制链接

扫一扫