vue.js 实现跑马灯的效果

谁践踏了优雅 2022-02-28 13:34 288阅读 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 条评论，288人围观）

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

相关阅读

相关跑马灯

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

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

相关 Stm32F407——跑马灯的实现(3)

通用I/O端口功能函数的设计： 1、提供端口入口 2、设置要配置的引脚 3、设置引脚功能 4.5、如为输出，设置数据驱动方式和速度 6、如为输入，设置上下拉

太过爱你忘了你带给我的痛/ 2022年10月17日 00:46/ 0 赞/ 207 阅读

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

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

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

相关 x86键盘跑马灯

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

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

相关安卓跑马灯的效果

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

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

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

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

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

相关跑马灯

[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 赞/ 250 阅读

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

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

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

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

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

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

相关 js title跑马灯

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

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