Js和VUE如何實現(xiàn)跑馬燈效果

發(fā)布時間：2020-07-22 10:25:48 來源：億速云閱讀：206 作者：小豬欄目：web開發(fā)

這篇文章主要講解了Js和VUE如何實現(xiàn)跑馬燈效果，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

本文實例為大家分享了Js和VUE分別實現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下

一、js實現(xiàn)跑馬燈

1.效果圖

Js和VUE如何實現(xiàn)跑馬燈效果

視頻上傳不了，只能看圖片了

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( )方法來設置時間重復執(zhí)行

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( )返回一個整數(shù)類型的數(shù)，然后把這個數(shù)賦值給clearInterval( )讓計時器停止

clearInterval(t);

然后點擊開始按鈕，跑馬燈走起；點擊停止按鈕，跑馬燈停止

start.onclick=function(){
 clearInterval(t);//防止多次點擊，而創(chuàng)建多個計時器
 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);//防止多次點擊，而創(chuàng)建多個計時器
 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實現(xiàn)跑馬燈

話不多說，直接上代碼了：

<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);//防止多次點擊而創(chuàng)建多個計時器
 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>

看完上述內(nèi)容，是不是對Js和VUE如何實現(xiàn)跑馬燈效果有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

Js和VUE如何實現(xiàn)跑馬燈效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽