本文详细展示了如何使用原生JavaScript和Vue框架分别实现网页跑马灯效果。通过字符串截取与拼接结合setInterval计时器，JS版本实现了基础的文字滚动功能；Vue版本则利用数据绑定和组件方法，提供了更简洁的实现方式。
本文分享使用JavaScript和Vue分别实现跑马灯效果的具体代码，供读者参考。
JavaScript实现跑马灯
一、JavaScript实现跑马灯
1. 效果展示
由于无法上传视频，此处仅展示静态图片。
2. 设计思路
核心逻辑是利用字符串截取方法。首先获取文本内容，分别提取第一个字符和剩余字符，将剩余字符与第一个字符拼接形成新字符串，再赋值回文本元素。具体实现代码如下：
var value=cont.innerHTML;
var start=value.substring(0,1);//截取第一个字符串
var end=value.substring(1);//截取剩余的字符串
var result=end+start;//拼接一个新的字符串
cont.innerHTML=result;//把新字符串赋值给p标签利用setInterval()方法设置时间间隔，使上述字符串处理逻辑重复执行。
t=setInterval(function(){
var value=cont.innerHTML;
var start=value.substring(0,1);//截取第一个字符串
var end=value.substring(1);//截取剩余的字符串
var result=end+start;//拼接一个新的字符串
cont.innerHTML=result;//把新字符串赋值给p标签
},500);setInterval()返回一个整数类型的计时器ID，将该ID赋值给clearInterval()参数即可停止计时器。
clearInterval(t);用户点击“开始”按钮触发滚动，点击“停止”按钮则终止滚动。
start.onclick=function(){
clearInterval(t);//防止多次点击，而创建多个计时器
t=setInterval(function(){
var value=cont.innerHTML;
var start=value.substring(0,1);//截取第一个字符串
var end=value.substring(1);//截取剩余的字符串
var result=end+start;//拼接一个新的字符串
cont.innerHTML=result;//把新字符串赋值给p标签
},500);
}
stop.onclick=function(){
clearInterval(t);
}3. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:300px;
margin:50px auto;
}
.content{
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="box">
<p class="content">生命永无止境~~~</p>
<button class="start">跑马灯走起</button>
<button class="stop">跑马灯停止</button>
</div>
<script>
var cont=document.querySelector(".content");
var start=document.querySelector(".start");
var stop=document.querySelector(".stop");
var t;
start.onclick=function(){
clearInterval(t);//防止多次点击，而创建多个计时器
t=setInterval(function(){
var value=cont.innerHTML;
var start=value.substring(0,1);//截取第一个字符串
var end=value.substring(1);//截取剩余的字符串
var result=end+start;//拼接一个新的字符串
cont.innerHTML=result;//把新字符串赋值给p标签
},500);
}
stop.onclick=function(){
clearInterval(t);
}
</script>
</body>
</html>Vue实现跑马灯
二、Vue实现跑马灯
直接展示Vue版本的实现代码：
<template>
<div>
<p>{{message}}</p>
<button @click="start" class="start">跑马灯走起</button>
<button @click="stop" class="stop">跑马灯停止</button>
</div>
</template>
<script>
export default {
data(){
return{
message:"生命永无止境~~~~",
t:null
}
},
methods:{
start(){
clearInterval(this.t);//防止多次点击而创建多个计时器
this.t=setInterval(()=>{
var start=this.message.substring(0,1);//截取第一个字符串
var end=this.message.substring(1);//截取剩余的字符串
this.message=end+start;
},500)
},
stop(){
clearInterval(this.t);
}
}
}
</script>
<style scoped>
</style>以上内容为本文全部代码示例，希望对学习有所帮助，欢迎支持。