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

更新時間：2020年05月25日 16:41:32 作者：kaolagirl

這篇文章主要為大家詳細介紹了Js和VUE實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

1.效果圖

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

2. 設(shè)計思路

使用截取字符串的方法，首先獲取文本的值，再分別截取文本的第一個字符串和剩余的字符串，然后重新拼接一個新的字符串，最后把這個新字符串賦值給文本，代碼如下：

var value=cont.innerHTML;
var start=value.substring(0,1);//截取第一個字符串
var end=value.substring(1);//截取剩余的字符串
var result=end+start;//拼接一個新的字符串
cont.innerHTML=result;//把新字符串賦值給p標簽

使用計時器setInterval( )方法來設(shè)置時間重復(fù)執(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: