分別用Js和vue實現跑馬燈效果

2021-10-07 18:19:12 字數 1155 閱讀 8883

跑馬燈就是這條資訊串首尾相連,向乙個方向迴圈滾動。。。

實現邏輯

① 根據id值獲取標籤

② 獲取標籤的文字內容

③ 擷取文字內容的第乙個字

④ 擷取文字內容第乙個字後面的所有內容

⑤ 把第③步擷取的第乙個字拼接到第④步擷取的文字內容後面

⑥ 將第⑤步拼接後的字串寫入到第①步的標籤中

**實現

"btn-wrap">

"btn-start">

"start()">動起來

"btn-stop">

"stop()">停下來

注意:

settimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式。settimeout()方法接收兩個引數,第乙個引數是將要推遲執行的函式名或者一段**,第二個引數是推遲執行的毫秒數。

在上面的跑馬燈效果中,當開啟頁面的時候,等待兩秒鐘,它會自動呼叫start方法,實現動起來的效果。

setinterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。

setinterval() 方法會不停地呼叫函式,直到clearinterval() 被呼叫或視窗被關閉。由setinterval() 返回的 id 值可用作clearinterval() 方法的引數。

**實現

}

注意

① 在vue中,如果想要獲取data上的資料,或者想要呼叫 methods 中的方法,必須通過this.屬性名this.方法名來進行呼叫,其中this就是當前的例項物件。

② 在vue中,會監聽data中所有資料的改變,只要資料一發生改變,就會自動把最新的資料同步到頁面中去。這樣可以減少程式設計師的工程量,不再考慮如何重新渲染dom頁面,只需要關心資料即可。

winfrom lable控制項實現跑馬燈效果

public partial class horseracelamp usercontrol public horseracelamp object obj new object 啟動跑馬燈 public void startpmd liststringlist catch exception ex...

js實現橫向跑馬燈效果

首先我們需要乙個html 的框架如下 我們的目的是實現ul中的內容進行橫向的一點一點滾動。ul中的內容應該是動態的。於是應該傳送ajax來進行內容的獲取拼接。ajax indexpage getsynoticeinfo success function result synoticeulnew em...

VUE實現文字左右滾動跑馬燈

在components中定義乙個可引用的元件 此功能封裝並非原創,在網上看到的,看的忘了 components 部分 my outbox my inbox ref box my list v for item,index in sendval key index ref list 剛剛購買了產品 m...