Vue实现简单跑马灯特效
更新时间：2022年05月18日 16:14:03 作者：pink-0614
这篇文章主要为大家详细介绍了Vue实现简单跑马灯特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现简单跑马灯特效的具体代码，供大家参考，具体内容如下
效果：
点击按钮让文字动起来，点击停止按钮让文字停止
知识点：
- substring(字符串截取)
- setInterval定时器(控制文字移动速度)
- clearInterval清除定时器(控制文字停止)
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#app{
width: 200px;
height: 120px;
background-color: pink;
text-align: center;
border-bottom: 1px solid #cfccc5;
}
</style>
</head>
<body>
<div id="app">
<h1>{{text}}</h1><br>
<button @click="piao()">飘</button>
<button @click="ding()">定住</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
text:"跑马灯效果！",
flag:null
},
methods:{
piao(){
// 如果ind已经被赋值了就返回
if(this.flag){return};
this.flag = setInterval(()=>{
// 截取首个字符
var head = this.text.substring(0,1);
// 截取除了首个字符外的所有字符
var foot = this.text.substring(1);
// 拼接起来
this.text = foot + head;
},100)
},
ding(){
// 清除定时器
clearInterval(this.flag);
// 把flag置空 不然下一次点击文字不会移动
this.flag=null;
}
}
})
</script>
</body>
</html>效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Nuxt的动态路由和参数校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
VueX 提供了一个全局都可以使用的数据管理仓库，不用考虑父子传值之类的问题，并且可以跨页面传递数据，提高了可维护性，这篇文章主要介绍了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue 集成 vis-network 实现网络拓扑图的方法，本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue和react的区别及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
下面小编就为大家分享一篇vue将时间戳转换成自定义时间格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
本篇文章主要介绍了详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Vue提供了丰富的API和组件，可以帮助开发者快速地构建现代化的Web应用程序，本文介绍了Vue如何实现分页功能，包括数据的获取、分页器的实现和页面的渲染2023-09-09
这篇文章主要介绍了如何使用 vue-cli 创建模板项目，帮助大家更好的理解和学习vue框架的知识，感兴趣的朋友可以了解下2020-11-11
MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性,这篇文章主要给大家介绍了关于Vue3使用MD5加密的相关资料,需要的朋友可以参考下2023-05-05
最新评论