Vue 文字跑马灯效果

一时失言乱红尘 2022-04-21 23:45 443阅读 0赞

## 1. 话不多说 看代码 ##

![在这里插入图片描述][20181031204818845.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue-2.5.17.js"></script>
      
    
    
    </head>
    <body>
    
    <div id="app">
    
       <input type="button" value="开始" v-bind:disabled=isDisabl @click="start">
        <input type="button" value="结束" @click="stop">
        <br>
        {
       {good}}
    
    </div>
    <script> new Vue({ el: "#app", data: { good: "好好学习，天天向上！！！", interval: null, isDisabl:false }, methods: { start() { console.log(this.good); var _this = this; _this.interval = setInterval(function () { //获取第一个字符 var start = _this.good.substring(0, 1); //得到后面的字符 var end = _this.good.substring(1); _this.isDisabl=true; //重新赋值 _this.good = end + start; }, 400) }, stop: function () { //停止计时器 this.isDisabl=false; clearInterval(this.interval); } } }) </script>
    
    </body>
    </html>

[20181031204818845.png]: /images/20220422/381f7c2f4deb4dd19b92222228e726ff.png

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关用VUE实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2023年11月04日 07:48/ 0 赞/ 277 阅读

相关 CSS中如何实现文字跑马灯效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 跑马灯 ⭐ 写在最后 -------------------- ⭐ 专栏简介前端入门之旅：探索W

ゝ一世哀愁。/ 2023年10月15日 15:53/ 0 赞/ 55 阅读

相关 Vue-跑马灯效果

代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

痛定思痛。/ 2023年10月08日 15:40/ 0 赞/ 71 阅读

相关 VUE跑马灯效果制作

分析： 1. 给【开始】按钮绑定一个点击事件 2. 在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串，然后调用字符串的substring来进行字符串的截取，把

比眉伴天荒/ 2023年10月05日 18:52/ 0 赞/ 23 阅读

相关 java实现文字跑马灯_Android 中TextView中跑马灯效果的实现方法

条件： 1、android:ellipsize=”marquee” 2、TextView必须单行显示，即内容必须超出TextView大小 3、TextView要获得焦点才

╰半夏微凉°/ 2022年11月06日 10:48/ 0 赞/ 257 阅读

相关 iOS 跑马灯效果

做项目的项目的时候，用到了标题滚动的效果（银行，商铺门面上悬挂的电子屏幕滚动信息),找了一下。写出来分享给大家 1.首先下载这个类文件[下载地址][Link 1]

野性酷女/ 2022年08月13日 18:39/ 0 赞/ 267 阅读

相关 Vue 文字跑马灯效果

1. 话不多说看代码 ![在这里插入图片描述][20181031204818845.png] <!DOCTYPE html> <html lang="

一时失言乱红尘/ 2022年04月21日 23:45/ 0 赞/ 444 阅读

相关 vue实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

深碍√TFBOYSˉ_/ 2022年04月18日 06:23/ 0 赞/ 532 阅读

相关 Vue教程02(跑马灯效果案例)

前面的文章我们介绍了v-on这个指令，可以用来实现事件的绑定，本文我们利用v-on来实现一个简单的跑马灯效果,就是如下这种效果 ![在这里插入图片描述][20190706

不念不忘少年蓝@/ 2021年12月14日 07:29/ 0 赞/ 421 阅读

相关 Vue学习之跑马灯效果

一个简单的跑马灯效果,就是如下这种效果 ![在这里插入图片描述][20190706113831829.gif] Vue跑马灯效果 1.分析 a.点击"加油

亦凉/ 2021年12月03日 05:37/ 0 赞/ 332 阅读