跑马灯HTMl

最新推荐文章于 2025-06-10 21:43:25 发布

拾忆最初的梦想

最新推荐文章于 2025-06-10 21:43:25 发布

阅读量136

点赞数 1

文章标签： vue html

本文链接：https://blog.youkuaiyun.com/w1073459332/article/details/115352552

版权

本文介绍了如何使用Vue.js实现一个简单的文字轮播效果，通过定时器改变字符串中的部分字符，展示基础的JavaScript操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入官方js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>

<div id="app">

    <input type="button" value="move" @click="move">
    <input type="button" value="stop" @click="stop">

    <h1><font color="blue">{{ msg }}</font></h1>
</div>


</body>
<script>
    new Vue({

        el:"#app",

        data(){
            return{
                msg:"中国移动通信",
                id:null
            }
        },

        methods:{

            move(){

               if(this.id!=null){
                   return;
               }

               this.id = setInterval( () => {
                    var start = this.msg.substring(0,1);//中
                    var end = this.msg.substring(1);//国移动通信

                    this.msg = end + start;
                },300)
            },

            stop(){
                clearInterval(this.id);
                this.id=null;
            }
        }
    })
</script>
</html>