一、效果

按下roll按钮，文字进行滚动；
按下stop按钮，文字停止滚动；

二、重要代码

1.通过以下方式引入Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.实现文字的更替

var start = this.text.substring(0, 1)//获取字符串的第一个元素
var end = this.text.substring(1)//获取字符串剩下的元素
this.text = end + start

3.设置定时器

setInterval(() => {var start = this.text.substring(0, 1)var end = this.text.substring(1)this.text = end + start
}, 400)

4.清除定时器

stop() {//按下按钮后文字清除定时器，文字滚动停止clearInterval(this.intervalID)this.intervalID = null
}

三、完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><link rel="stylesheet" href="跑马灯.css">
</head><body><div id="else" class="main"><p class="main-content">{{text}}</p><span><input type="button" value="ROLL" @click="lang" class="btn"></span><span><input type="button" value="STOP" @click="stop" class="btn"></span></div><script>var vm = new Vue({el: '#else',data: {text: "今日本店开业，全场商品五折，欢迎进店品尝！",intervalID: null},methods: {lang() {if (this.intervalID != null) return;this.intervalID = setInterval(() => {var start = this.text.substring(0, 1)var end = this.text.substring(1)this.text = end + start}, 400)},stop() {clearInterval(this.intervalID)this.intervalID = null}}})</script></body></html>

喜欢别忘了点个赞呀

【前端学习日记】利用Vue实现跑马灯的效果相关推荐

【前端学习日记】利用reveal.js把实验报告做成一个简单的幻灯片
一.整体效果把电磁场的实验报告做成网页PPT,原文是这里:<[电磁场实验作业]有限差分法(FDM)求解静电场电位分布_轩辕衍的博客-CSDN博客> 二.核心代码讲解 0.创建页面第一篇 ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
小白前端学习日记（一）认识前端
小白前端学习日记系列小白前端学习日记(二)HTML基础语法与标签小白前端学习日记(一)认识前端小白前端学习日记系列前言前端是什么前端所需要掌握的基本能力结构层--HTML 样式层--CS ...
Web前端学习日记1
博客,你好,从今天开始,我就会开始在你这里发表我的Web前端学习日记,请多多指教哦! 今天是从HTML基础学起,虽然说以前有上过类似的课程,但是还是学到了很多,最大的收益就是又掌握了很多快捷键,对于我 ...
html纵向的跑马灯效果,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
html语言怎么做到走马灯,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
[html] 如何使用纯HTML实现跑马灯的效果？
[html] 如何使用纯HTML实现跑马灯的效果? HTML marquee 元素用来插入一段滚动的文字. 但是该元素已废弃. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...

【前端学习日记】利用Vue实现跑马灯的效果

一、效果

二、重要代码

1.通过以下方式引入Vue

2.实现文字的更替

3.设置定时器

4.清除定时器

三、完整代码

【前端学习日记】利用Vue实现跑马灯的效果相关推荐

最新文章

热门文章