Vue 使用计时器实现跑马灯效果的实例代码
Vue 使用计时器实现跑马灯效果，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../Vue/vue.js"></script>
<link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<title>跑马灯</title>
<style type="text/css">
#app button {
outline: none;
}
</style>
</head>
<body>
<div id="app" style="margin: 20px">
<button class="btn btn-info" @click='lang'>飞的速度</button>
<button class="btn btn-info" @click='stop'>猥琐发育</button>
<div>
<h4 style="color: red">{{msg}}</h4>
<img src="buxiang.jpeg" alt="">
</div>
</div>
<script>
var ve = new Vue({
el: '#app',
data: {
msg: '只有飞速的旋转，才可以止住为的泪水，忘记你的模样。。。',
intervalId: null,
},
methods: {
// 动起来
lang() {
if (this.intervalId != null) return;
this.intervalId = setInterval(() => {
// 获取第一个字符
var start = this.msg.substring(0, 1)
// 获取第一个字符后面的所有字符
var end = this.msg.substring(1)
this.msg = end + start
}, 300)
},
// 停止运动
stop() {
clearInterval(this.intervalId)
// 重新赋值null
this.intervalId = null
}
}
})
</script>
<script src="lib/jquery/jquery-3.4.1.js"></script>
<script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
效果
总结
以上所述是小编给大家介绍的Vue 使用计时器实现跑马灯效果的实例代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
vue 计时器组件的实现代码
整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex
-
Vue 使用计时器实现跑马灯效果的实例代码
Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="
-
vue+animation动画实现跑马灯效果
本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码,供大家参考,具体内容如下 1.单行显示,每行只显示一条 效果图 上代码 <template> <div class="container"> <div class="box"> <!-- 假设lists列表有4个项,设置ul的宽度为800%(相对于box),设置li的宽度为12.5%(相对于ul是12.5%:相对于box是10
-
vue实现简单的跑马灯效果
本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 效果图 代码 html <div id="app"> <button @click="start">开启</button> <button @click="stop">停止</button> <p>{{msg}}</p> </div> vue var app = new
-
Unity实现跑马灯效果的示例代码
目录 一.效果 二.需要动画插件DOTween 三.脚本 1.每个格子上的脚本文件 2.管理脚本文件 一.效果 二.需要动画插件DOTween 下载地址 三.脚本 1.每个格子上的脚本文件 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using DG.Tweening; public class MarqueeUIItem : MonoBe
-
C#实现跑马灯效果的示例代码
目录 文章描述 开发环境 开发工具 实现代码 实现效果 文章描述 跑马灯效果,功能效果大家应该都知道,就是当我们的文字过长,整个页面放不下的时候(一般用于公告等),可以让它自动实现来回滚动,以让客户可以看到完整的信息(虽然要多等一会儿时间). 其实对于Winform这种技术,实现任何的动态效果相对来说都比较麻烦.而且一般都需要搭配定时器使用,当然,这次要写的跑马灯效果也是一样的,使用了System.Timers.Timer来实现,关于其他定时器以及用法,之前文章有写过,有兴趣的可以翻一下. 因为
-
vue实现表格增删改查效果的实例代码
整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p
-
Vue实现Header渐隐渐现效果的实例代码
新建header.vue组件 引入到父组件Detail.vue中 header.vue 通过router-link标签设置to属性为地址,实现点击返回首页 tag标签设为div,就有了div的属性 <template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=&q
-
Js和VUE实现跑马灯效果
本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring
-
Vue实现跑马灯效果
本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 实现的业务逻辑 1.给[嗨起来]按钮,绑定一个点击事件 v-on(@). 2.在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置. 3.为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中. 实现代码如下: <!DOCTYPE html> <html lang="en"> <he
-
vue实现简单跑马灯效果
本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 如下图片,会自行向 上"滚动" 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯 </title> <script src="https://cdn.bootcss.com/