Js和VUE实现跑马灯效果

时间：2021-05-26

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

一、js实现跑马灯

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( )方法来设置时间重复执行

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( )返回一个整数类型的数，然后把这个数赋值给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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章