Js和VUE分别实现跑马灯效果的具体代码

Js和VUE分别实现跑马灯效果的具体代码

23
2020-07-29 16:36:56

本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下

一、js实现跑马灯

1.效果图

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( )返回一个整数类型的数,然后把这个数赋值给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实现跑马灯

话不多说,直接上代码了:

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

Js和VUE分别实现跑马灯效果的具体代码 (https://www.wpmee.com/) javascript教程 第1张

喜欢这个文章就点个赞分享给好友吧~

END
相关标签

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持