Vue实现跑马灯简单效果

2022-04-15 517

本文实例为大家分享了Vue实现跑马灯简单效果的具体代码,供大家参考,具体内容如下

1、跑马灯效果

Vue实现跑马灯简单效果

说明:单击”应援”按钮文字向左飘动,再单击”暂停”按钮停止当前飘动

Vue实现跑马灯简单效果

2、完整代码 (注意:代码中需要引入vue.js文件,这个文件自己根据目录位置引入,具体位置代码中有注释)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <!-- 引入vue.js文件-->
    <script src="../vue.js"></script>
 <style type="text/css">
  #app{
   padding: 20px;
  }
 </style>
</head>
<body>
<div id="app">
    <button @click="run">应援</button>
    <button @click="stop">暂停</button>
 <h3>{{msg}}</h3>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"朋友朋友我爱你,就像老鼠爱大米~~~!",
            timer:null //在data上定义定时器timer,默认为null
        },
        methods:{
            run(){
    // 如果timer已经赋值就返回
                if(this.timer){return};
                this.timer = setInterval(() => {
     // msg分割为数组
     var arr = this.msg.split('');
     // shift删除并返回删除的那个,push添加到最后
     // 把数组第一个元素放入到最后面
     arr.push(arr.shift());
     // arr.join('')吧数组连接为字符串复制给msg
     this.msg = arr.join('');
                },100)
            },
            stop(){
                //清除定时器
                clearInterval(this.timer);
                //清除定时器之后,需要重新将定时器置为null
                this.timer = null;
            }
        }
    })
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持NICE源码。

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript Vue实现跑马灯简单效果 https://www.niceym.com/18806.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情