Js和VUE實現跑馬燈效果
阿新 • • 發佈：2020-05-26
本文例項為大家分享了Js和VUE分別實現跑馬燈效果的具體程式碼，供大家參考，具體內容如下
一、js實現跑馬燈
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( )返回一個整數型別的數，然後把這個數賦值給clearInterval( )讓計時器停止
clearInterval(t);
然後點選開始按鈕，跑馬燈走起；點選停止按鈕，跑馬燈停止
start.onclick=function(){
clearInterval(t);//防止多次點選，而建立多個計時器
t=setInterval(function(){
var value=cont.innerHTML;
var start=value.substring(0,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,500);
}
stop.onclick=function(){
clearInterval(t);
}
</script>
</body>
</html>二. 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。