【前端学习日记】利用Vue实现跑马灯的效果
生活随笔
收集整理的這篇文章主要介紹了
【前端学习日记】利用Vue实现跑马灯的效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、效果
- 按下roll按鈕，文字進行滾動；
- 按下stop按鈕，文字停止?jié)L動；
二、重要代碼
1.通過以下方式引入Vue
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>2.實現(xiàn)文字的更替
var start = this.text.substring(0, 1)//獲取字符串的第一個元素 var end = this.text.substring(1)//獲取字符串剩下的元素 this.text = end + start3.設置定時器
setInterval(() => {var start = this.text.substring(0, 1)var end = this.text.substring(1)this.text = end + start }, 400)4.清除定時器
stop() {//按下按鈕后文字清除定時器，文字滾動停止clearInterval(this.intervalID)this.intervalID = null }三、完整代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><link rel="stylesheet" href="跑馬燈.css"> </head><body><div id="else" class="main"><p class="main-content">{{text}}</p><span><input type="button" value="ROLL" @click="lang" class="btn"></span><span><input type="button" value="STOP" @click="stop" class="btn"></span></div><script>var vm = new Vue({el: '#else',data: {text: "今日本店開業(yè)，全場商品五折，歡迎進店品嘗！",intervalID: null},methods: {lang() {if (this.intervalID != null) return;this.intervalID = setInterval(() => {var start = this.text.substring(0, 1)var end = this.text.substring(1)this.text = end + start}, 400)},stop() {clearInterval(this.intervalID)this.intervalID = null}}})</script></body></html>喜歡別忘了點個贊呀😄
總結(jié)
以上是生活随笔為你收集整理的【前端学习日记】利用Vue实现跑马灯的效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux系统管理常用命令
- 下一篇： 【前端学习日记】用reveal.js实现