寫在前面： 我是「揚帆向海」，這個暱稱來源於我的名字以及女朋友的名字。我熱愛技術、熱愛開源、熱愛編程。
技術是開源的、知識是共享的。
這博客是對自己學習的一點點總結及記錄，如果您對 Java、算法 感興趣，可以關注我的動態，我們一起學習。
用知識改變命運，讓我們的家人過上更好的生活。
| 跑馬燈就是這條信息串首尾相連，向一個方向循環滾動。。。 |
一、使用js實現
實現邏輯：
① 根據id值獲取標籤
② 獲取標籤的文本內容
③ 截取文本內容的第一個字
④ 截取文本內容第一個字後面的所有內容
⑤ 把第③步截取的第一個字拼接到第④步截取的文本內容後面
⑥ 將第⑤步拼接後的字符串寫入到第①步的標籤中
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>純js實現跑馬燈效果</title>
<style>
.btn-start {
text-align: center;
color: white;
background-color: green;
font-size: 15px;
margin-top: 10px;
}
.btn-stop {
text-align: center;
color: white;
background-color: red;
font-size: 15px
}
.btn-wrap {
margin: 10px auto;
width: 32%;
}
#str {
background-color: rgb(116, 114, 231);
color: white;
font-size: 35px;
width: 32%;
margin: auto;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="str">歡迎訪問揚帆向海的博客!!!</div>
<div class="btn-wrap">
<button class="btn-start">
<span onclick="start()">動起來</span>
</button>
<button class="btn-stop">
<span onclick="stop()">停下來</span>
</button>
</div>
<script type="text/javascript">
var intervalId = null;
var timerId = null;
$(function () {
initTimer();
})
function start() {
// 判斷定時器id是否爲空
if (intervalId != null) {
return
}
intervalId = setInterval(function () {
var label = document.getElementById('str');
var text = label.innerText;
var begin = text.substring(0, 1);
var end = text.substring(1);
var text_new = end + begin;
label.innerText = text_new;
}, 200);
}
function stop() {
// 清除定時器
clearInterval(intervalId);
// 把定時器id置爲空
intervalId = null;
}
function initTimer() {
// 設置在指定2秒後執行
timerId = setTimeout(function () {
start();
}, 2000);
}
</script>
</body>
</html>
測試效果：
注意：
① setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。setTimeout()方法接收兩個參數，第一個參數是將要推遲執行的函數名或者一段代碼，第二個參數是推遲執行的毫秒數。
在上面的跑馬燈效果中，當打開頁面的時候，等待兩秒鐘，它會自動調用start方法，實現動起來的效果。
② setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
二、使用vue實現
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/jquery.js"></script>
<style>
.btn-start {
text-align: center;
color:white;
background-color: green;
font-size: 15px;
margin-top: 10px;
}
.btn-stop {
text-align: center;
color: white;
background-color: red;
font-size: 15px
}
.btn-wrap {
margin: 10px auto;
width: 32%;
}
.str{
background-color: rgb(116, 114, 231);
color: white;
font-size: 35px;
width: 32%;
margin: auto;
}
</style>
</head>
<body>
<div id="app">
<div class="str">{{msg}}</div>
<div class="btn-wrap">
<input type="button" class="btn-start" value="動起來" @click="start" />
<input type="button" class="btn-stop" value="停下來" @click="stop" />
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "歡迎訪問揚帆向海的博客!!!",
intervalId: null,
timerId: null
},
mounted() {
this.initTimer()
},
methods: {
start() {
if (this.intervalId != null) {
return;
}
this.intervalId = setInterval(() => {
var begin = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + begin
}, 200);
},
stop() {
clearInterval(this.intervalId)
this.intervalId = null
},
initTimer() {
this.timerId = setTimeout(() => {
this.start()
},2000)
}
},
destoryed() {
this.timerId = null
}
});
</script>
</body>
</html>
注意：
① 在vue中，如果想要獲取data上的數據，或者想要調用 methods 中的方法，必須通過this.屬性名 或 this.方法名 來進行調用，其中 this 就是當前的實例對象。
② 在vue中，會監聽data中所有數據的改變，只要數據一發生改變，就會自動把最新的數據同步到頁面中去。這樣可以減少程序員的工程量，不再考慮如何重新渲染dom頁面，只需要關心數據即可。
由於水平有限，本博客難免有不足，懇請各位大佬不吝賜教！