跑马灯

Bertha 。 2022-12-01 15:53 211阅读 0赞

# vue 跑马灯 #

思路：将字符串的第一个字符取出，再将剩下的所有字符取出，重新拼接字符串，将第一个字符放在最后，设置计时器。

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<h3>跑马灯效果</h3>
    		<div id="app">
    			<p>{ { text}}</p>
    			
    			<button @click="start()">飘</button>
    			<button @click="stop()">停止</button>
    		</div>
    		<script type="text/javascript">
    			new Vue({ 
    				el:"#app",
    				data:{ 
    					text:'取次花丛懒回顾，半缘修道半缘君。',
    					temp:null,
    				},
    				methods:{ 
    					start(){ 
    						if(this.temp===null){ 
    							this.temp = setInterval(()=>{ 
    								let t1 = this.text.substr(0,1);
    								let t2 = this.text.substring(1);
    								this.text= t2 + t1;
    							},100)
    						}
    					},
    					stop(){ 
    						clearInterval(this.temp);
    						this.temp=null;
    					}
    				}
    			})
    			
    			
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

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

相关阅读

相关跑马灯

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

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

相关 x86键盘跑马灯

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

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

相关安卓跑马灯的效果

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

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

相关 12.16 android textView 跑马灯

引言： TextView之所以需要跑马灯，是由于文字太长,或者是吸引眼球。关键代码如下： Android:si

墨蓝/ 2022年08月06日 03:09/ 0 赞/ 129 阅读

相关 Android TextView跑马灯不动

<TextView android:text="每一个视图的绘制过程都必须经历三个最主要的阶段，即onMeasure()、onLayout()和onDraw()," a

绝地灬酷狼/ 2022年06月12日 00:09/ 0 赞/ 261 阅读

相关前端插件之跑马灯

1.效果图 ![20170831131759762][] 不间断滚动。 2.css代码 wrapper{ border-top: 3px

阳光穿透心脏的1/2处/ 2022年06月09日 07:44/ 0 赞/ 668 阅读

相关跑马灯

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

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

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

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

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

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

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

相关 js title跑马灯

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

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