文章目录- 一、使用js实现
- 二、使用vue实现
跑马灯就是这条信息串首尾相连，向一个方向循环滚动。。。 |
|---|
一、使用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">欢迎访问TwcatL的博客!!!</div>
<div class="btn-wrap">
<button class="btn-start">
<span οnclick="start()">动起来</span>
</button>
<button class="btn-stop">
<span οnclick="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页面，只需要关心数据即可。
