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

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

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

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

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

1.效果圖

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

2. 設(shè)計(jì)思路

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

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

使用計(jì)時(shí)器setInterval( )方法來(lái)設(shè)置時(shí)間重復(fù)執(zhí)行

t=setInterval(function(){
 var value=cont.innerHTML;
 var start=value.substring(0,1);//截取第一個(gè)字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一個(gè)新的字符串
 cont.innerHTML=result;//把新字符串賦值給p標(biāo)簽
 },500);

setInterval( )返回一個(gè)整數(shù)類型的數(shù)，然后把這個(gè)數(shù)賦值給clearInterval( )讓計(jì)時(shí)器停止

clearInterval(t);

然后點(diǎn)擊開始按鈕，跑馬燈走起；點(diǎn)擊停止按鈕，跑馬燈停止

start.onclick=function(){
 clearInterval(t);//防止多次點(diǎn)擊，而創(chuàng)建多個(gè)計(jì)時(shí)器
 t=setInterval(function(){
 var value=cont.innerHTML;
 var start=value.substring(0,1);//截取第一個(gè)字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一個(gè)新的字符串
 cont.innerHTML=result;//把新字符串賦值給p標(biāo)簽
 },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">生命永無(wú)止境~~~</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);//防止多次點(diǎn)擊，而創(chuàng)建多個(gè)計(jì)時(shí)器
 t=setInterval(function(){
 var value=cont.innerHTML;
 var start=value.substring(0,1);//截取第一個(gè)字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一個(gè)新的字符串
 cont.innerHTML=result;//把新字符串賦值給p標(biāo)簽
 },500); 
 }
 stop.onclick=function(){
 clearInterval(t);
 }
 </script>
</body>
</html>

二. vue實(shí)現(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:"生命永無(wú)止境~~~~",
 t:null
 }
 },
 methods:{
 start(){
 clearInterval(this.t);//防止多次點(diǎn)擊而創(chuàng)建多個(gè)計(jì)時(shí)器
 this.t=setInterval(()=>{
 var start=this.message.substring(0,1);//截取第一個(gè)字符串
 var end=this.message.substring(1);//截取剩余的字符串
 this.message=end+start;
 },500)
 },
 stop(){
 clearInterval(this.t);
 }
 }
}
</script>
<style scoped>

</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: