Vue跑马灯效果

最新推荐文章于 2024-05-16 17:54:12 发布

最像你的我.

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量2.3k

点赞数 1

文章标签： vue.js javascript 前端 html

本文链接：https://blog.csdn.net/qq_53966155/article/details/121022366

版权

1、跑马灯效果

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

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>

最像你的我.

关注

1
点赞
踩
5

收藏

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

1、跑马灯效果说明：单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动2、完整代码 (注意：代码中需要引入vue.js文件，这个文件自己根据目录位置引入，具体位置代码中有注释)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title> <!-- 引入vue.js文件...
复制链接

扫一扫