分别用Js和vue实现跑马灯效果，前端开发项目源代码

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);

}

测试效果：

注意：

① setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout()方法接收两个参数，第一个参数是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。

在上面的跑马灯效果中，当打开页面的时候，等待两秒钟，它会自动调用start方法，实现动起来的效果。

② setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

二、使用vue实现

代码实现：

{{msg}}

<input type=“button” class=“btn-start” value=“动起来” @click=“start” />

<input type=“button” class=“btn-stop” value=“停下来” @click=“stop” />