本文實例為大家分享了Js和VUE分別實現跑馬燈效果的具體代碼，供大家參考，具體內容如下
一、js實現跑馬燈
1.效果圖
視頻上傳不了，只能看圖片了
2. 設計思路
使用截取字符串的方法，首先獲取文本的值，再分別截取文本的第一個字符串和剩餘的字符串，然後重新拼接一個新的字符串，最後把這個新字符串賦值給文本，代碼如下：
var value=cont.innerHTML; var start=value.substring(0,1);//截取第一個字符串 var end=value.substring(1);//截取剩餘的字符串 var result=end+start;//拼接一個新的字符串 cont.innerHTML=result;//把新字符串賦值給p標籤
使用計時器setInterval( )方法來設置時間重複執行
t=setInterval(function(){ var value=cont.innerHTML; var start=value.substring(0,1);//截取第一個字符串 var end=value.substring(1);//截取剩餘的字符串 var result=end+start;//拼接一個新的字符串 cont.innerHTML=result;//把新字符串賦值給p標籤 },500);
setInterval( )返回一個整數類型的數，然後把這個數賦值給clearInterval( )讓計時器停止
clearInterval(t);
然後點擊開始按鈕，跑馬燈走起；點擊停止按鈕，跑馬燈停止
start.onclick=function(){ clearInterval(t);//防止多次點擊，而創建多個計時器 t=setInterval(function(){ var value=cont.innerHTML; var start=value.substring(0,1);//截取第一個字符串 var end=value.substring(1);//截取剩餘的字符串 var result=end+start;//拼接一個新的字符串 cont.innerHTML=result;//把新字符串賦值給p標籤 },500); } stop.onclick=function(){ clearInterval(t); }
3. 整體代碼
Document生命永無止境~~~跑馬燈走起跑馬燈停止
二. vue實現跑馬燈
話不多說，直接上代碼了：
{{message}}跑馬燈走起跑馬燈停止{ var start=this.message.substring(0,1);//截取第一個字符串 var end=this.message.substring(1);//截取剩餘的字符串 this.message=end+start; },500) }, stop(){ clearInterval(this.t); } } }" _ue_custom_node_="true">
[e36605 ] Js和VUE實現跑馬燈效果已經有913次圍觀