Js和VUE实现跑马灯效果
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于Vue的文字跑马灯组件(npm 组件包)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包 有点惭愧,之前通过npm install ...安装pac
-
javascript跑马灯抽奖实例讲解
本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p
-
JS实现字体背景跑马灯
本文实例为大家分享了JS实现字体背景跑马灯的具体代码,供大家参考,具体内容如下 知识点 1.通过 @keyframes 规则,创建动画. 2.背景作用域: background-clip: text; -webkit-background-clip: text; 3.background-position定位背景图像 4.color: transparent 全透明 运行效果 代码 <!DOCTYPE html> <html lang="en"> <hea
-
Vue实现简单的跑马灯
Vue实现滚动字条/跑马灯,供大家参考,具体内容如下 内容不多,直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../资料/js/vue.js"></script> <!-- 引入V
-
js跑马灯代码(自写)
复制代码 代码如下: function cls_marquee(id,id1,id2,sp){ this.obj_id=id; this.obj_id1=id1; this.obj_id2=id2; this.speed=sp; eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML"); function Marquee(){ if(eval(id2).offsetTop-eval(id).scrollTo
-
js实现文字跑马灯效果
本示例将实现文字跑马灯效果:文字超过显示宽度每间隔1s自动向左滚动显示,话不多说,请看代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,in
-
原生JS实现跑马灯效果
效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; } div{ position: relative
-
Vue 使用计时器实现跑马灯效果的实例代码
Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="
-
Vue实现跑马灯效果
本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 实现的业务逻辑 1.给[嗨起来]按钮,绑定一个点击事件 v-on(@). 2.在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置. 3.为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中. 实现代码如下: <!DOCTYPE html> <html lang="en"> <he
-
javascript新闻跑马灯实例代码
本文实例为大家分享了javascript实现的跑马灯效果代码,实现了新闻公告之类的功能,下面提供了一段跑马灯实例供大家参考之用,希望能够对需要的朋友有所帮助. 运行效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>javascript新闻跑马灯效果</title> </head> <script ty