您的位置：首页 > Web前端 > Vue.js

vue框架实现走马灯

2019-08-07 20:40 274 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_39913441/article/details/98782989

vue框架实现走马灯

走马灯的思想很简单：

  1. 利用定时器
  2. 利用substring()不断截取字符串来实现字符位置的转换（比如：abc–>bca，bca->cab,cab->abc）即不断的截取第一个字符(start)和1～.length-1(end)的字符，将截取的第一个字符(start)加到end后面，形成新的字符串，利用定时器不断的执行，则形成走马灯。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue跑马灯</title>
<script src="vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
p{
border: 1px solid black;
padding: 10px;
width: 130px;
height: 50px;
background: plum;
line-height: 50px;

}
</style>
</head>
<body>
<div id="app">
<input type="button" value="play" @click="play">
<input type="button" value="stop" @click="stop"/>
<p>{{msg}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'猥琐，别浪～～～',
timerInterval:null
},
methods:{
play:function(){
var _this = this;
_this.tiemsetInterval=setInterval(function(){

// substring(0,i)取字符串的前i个字符
var start = _this.msg.substring(0,1) //取第1个字符
var end = _this.msg.substring(1)//取1～msg.length-1的字符
_this.msg = end + start
},500)
},
stop:function(){ //清楚定时器
clearInterval(_this.tiemsetInterval)
_this.timerInterval=null
}
}
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航