vue.js 实现跑马灯的效果

谁践踏了优雅 2022-02-28 13:34 278阅读 0赞

要求：点击“动起来”按钮实现跑马灯的效果（即字符自动滚动），点击“不要动”按钮实现跑马灯停止。

html源码：

<div  id="go">
        <button @click="fun">动起来</button>
        <button @click="stop">不许动</button>
        <p>{
      {ent}}</p>
    </div>

vue.js源码：

var go = new Vue({
        el:"#go",
        data:{
            ent:"套马杆的汉字威武雄壮!  "
        },
        methods:{
            dong: function(){
                    var first = this.ent.substring(0,1);           //获取第一个字符
                    var end = this.ent.substring(1);              //获取第二个及其以后的所有字符
                    this.ent=end+first;                           //将第一个字符放置末尾
            },
            fun:function(){
                this.timer = setInterval(this.dong, 400);       //计时器，400毫秒执行一次dong函数
            },
            stop:function(){                                     //停止函数
                clearInterval(this.timer);                     
            }
        }
    })

效果图：

![2019032522003767.png][]（我不会截动图，就是那么个意思^\_^）

[2019032522003767.png]: /images/20220228/68f93c41388348b69b73cb6372edb369.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html 跑马灯

废话不多说，直接代码copy进去运行就知道了 <!DOCTYPE html> <html> <head> <meta charse

约定不等于承诺〃/ 2023年06月11日 12:26/ 0 赞/ 9 阅读

相关跑马灯

vue 跑马灯思路：将字符串的第一个字符取出，再将剩下的所有字符取出，重新拼接字符串，将第一个字符放在最后，设置计时器。代码如下： <!DOCTYPE h

Bertha 。/ 2022年12月01日 15:53/ 0 赞/ 238 阅读

相关 uniapp的项目，scss和js实现跑马灯

`页面组件` <view class="innovate"> <view class="l"> <image class="noticeTwo"

曾经终败给现在/ 2022年10月07日 11:45/ 0 赞/ 861 阅读

相关 x86键盘跑马灯

我一直痴迷于用代码来控制硬件执行各种动作，有一天我突然想到，是不是可以用电脑的键盘灯来做一个跑马灯呢? 如果你读过linux0.11代码，我们就知道，linus已经

灰太狼/ 2022年09月20日 11:21/ 0 赞/ 171 阅读

相关安卓跑马灯的效果

直接在布局里写代码就好了 <TextView android:id="@+id/menu\_desc" android:

深碍√TFBOYSˉ_/ 2022年09月18日 07:49/ 0 赞/ 202 阅读

相关使用TextView实现跑马灯的效果

单个跑马灯效果： <TextView android:id="@+id/button1" android:ellips

ゞ浴缸里的玫瑰/ 2022年07月24日 05:09/ 0 赞/ 187 阅读

相关跑马灯

[https://github.com/search?l=Java&q=%E8%B7%91%E9%A9%AC%E7%81%AF&type=Repositories&utf8=%

谁践踏了优雅/ 2022年06月05日 09:27/ 0 赞/ 243 阅读

相关 vue.js 实现跑马灯的效果

要求：点击“动起来”按钮实现跑马灯的效果（即字符自动滚动），点击“不要动”按钮实现跑马灯停止。 html源码： <div id="go"> <bu

谁践踏了优雅/ 2022年02月28日 13:34/ 0 赞/ 279 阅读

相关 js实现图片无缝循环跑马灯

html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=

亦凉/ 2021年11月05日 23:46/ 0 赞/ 478 阅读

相关 js title跑马灯

<html> <head> <meta charset="utf-8"> <title id="a">一二三四五六</title>

小灰灰/ 2021年07月24日 23:12/ 0 赞/ 449 阅读