日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

【前端学习日记】利用Vue实现跑马灯的效果

發布時間：2025/4/16 58 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【前端学习日记】利用Vue实现跑马灯的效果 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、效果

  • 按下roll按鈕，文字進行滾動；
  • 按下stop按鈕，文字停止滾動；

二、重要代碼

1.通過以下方式引入Vue

<!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.實現文字的更替

var start = this.text.substring(0, 1)//獲取字符串的第一個元素 var end = this.text.substring(1)//獲取字符串剩下的元素 this.text = end + start

3.設置定時器

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: "今日本店開業，全場商品五折，歡迎進店品嘗！",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>

喜歡別忘了點個贊呀😄

總結

以上是生活随笔為你收集整理的【前端学习日记】利用Vue实现跑马灯的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。