歡迎您光臨本站 註冊首頁

Js和VUE實現跑馬燈效果

←手機掃碼閱讀     e36605 @ 2020-06-09 , reply:0

本文實例為大家分享了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實現跑馬燈效果已經有218次圍觀

http://coctec.com/docs/vue-js/show-post-237636.html