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

本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下一、js实现跑马灯1.效果图12.设计思路使用

本文实例为大家分享了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>

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

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6983.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注