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

本文实例为大家分享了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.wp-admin.cn/) javascript教程 第1张

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-09-24 13:14:25
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: