vue 跑马灯效果

最新推荐文章于 2024-01-16 11:35:51 发布

隅寒

最新推荐文章于 2024-01-16 11:35:51 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_41881409/article/details/105010294

版权

一、功能

1.点击按钮开始滚动

2.点击按钮停止滚动

二、源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <!-- 引入vue.js-->
    <script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show">跑起来</button>
    <button @click="stop">stop</button>
    <h3 v-text="message"></h3>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"股市有风险，入市需谨慎",
            timer:null //在data上定义定时器timer，默认为null
        },
        methods:{
            show(){
                if(this.timer != null) return;
                this.timer = setInterval(() => {
                    //获取到头的第一个字符
                    let start = this.message.substring(0,1);
                    //获取到后面的所有字符
                    let end = this.message.substring(1);
                    //重新拼接得到新的字符串，并赋值给this.message
                    this.message = end + start;
                },300)
            },
            stop(){
                //清除定时器
                clearInterval(this.timer)
                //清除定时器之后，需要重新将定时器置为null
                this.timer = null
            }
        }
    })
</script>
</body>
</html>

隅寒

关注

0
点赞
踩
0

收藏

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

一、功能1.点击按钮开始滚动2.点击按钮停止滚动二、源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title>  <script...
复制链接

扫一扫