实现跑马灯效果的js和vue代码

作者 : 奇兔源码吧 本文共2062个字,预计阅读时间需要6分钟 发布时间: 2020-07-30 共16人阅读

pppgnmrchttp://etwalpapers//p
本文的例子是分享js和vue的特定代码,以达到跑马灯的效果,供参考,如下/p
pi,js实现跑马灯/p
p1.效果图/p
p1/p
p2.
p使用拦截字符串的方法,首先获取文本的值,然后拦截文本的第一个字符串和其余字符串,然后重新组装一个新字符串,最后将新字符串分配给文本如下:/p
talbrdlspacking1c1dlping
tbody
tr
tdva值content.innerhtml:/p
substring(0,1);//拦截第一个字符串/p
substring(1)substring(1)
一个新的字符串/p
pcontent.innerhtml结果://将新字符串分配给ptag/td
/tr
/tbody
/表
psetinterval返回整数类型的数目,然后将值分配给cleariterval。
talbrdlspacking1c1dlping
tbody
tr
tdclead
/tr
/tbody
/表
然后点击开始按钮,运行马灯,点击停止按钮,停止马灯/p
talbrdlspacking1c1dlping
tbody
tr
tdstart.onclick函数()/p
pclearinterval(t);//防止多次点击并创建多个计时器/p
ptsetinterval(funding()/p
pva值content.innerhtml:/p
substring(0,1);//拦截第一个字符串/p
substring(1)substring(1)
一个新的字符串/p
pcontent.innerhtml结果://将新字符串分配给p标记/p
p,500);/p
p/p
pstop.onclick函数()/p
pcleaninterval(t);/p
p/td
/tr
/tbody
/表
p3.正文编码/p
talbrdlspacking1c1dlping
tbody
tr
td<!doctyp
p<htmlngen>p
p<head>/p
p<metautf-8>/p
p<meameviewport内容宽度devic-widt,nital-scale1.0gt;/p
p<title>documents</title>/p
p<style>/p
p/p
p比值:0px;/p
p填充:0px;/p
p/p
p.box/p
p宽度:300px;/p
p比值:50pxa;p
p/p
p.内容/p
p边际底部:20px;/p
p/p
p</style>/p
p</head>/p
p<body>/p
p<divlassbox>/p
p<&
跑<buttto"nlass>跑马灯亮起</buttongt;/p
停止运行灯</按钮>/p
p</div>/p
p /p
p<脚本>/p
pvacrontdocument.queryselector(".content");/p
pvatrust.queryselector(".start");/p
pvvrstopdocument.queryselector(".stop");/p
pva;/p
pstart.onclick函数()/p
pclearinterval(t);//防止多次点击并创建多个计时器/p
ptsetinterval(funding()/p
pva值content.innerhtml:/p
substring(0,1);//拦截第一个字符串/p
substring(1)substring(1)
一个新的字符串/p
pcontent.innerhtml结果://将新字符串分配给p标记/p
p,500);/p
p/p
pstop.onclick函数()/p
pcleaninterval(t);/p
p/p
p</script>/p
p</body>/p
p</html>/td
/tr
/tbody
/表
p
p不多,直接代码:/p
talbrdlspacking1c1dlping
tbody
tr
td<temprate>/p
p<div>/p
p<p>message</p>/p
按钮点击start类start;运行灯
p<但单击stop>/p
p</div>/p
p</template>/p
p<脚本>/p
pxporefaul/p
pdata()/p
p返回/p
p信息:"生活永不结束",/p
pt:null/p
p/p
p,/p
方法:/p
pstart()/p
pclearinterval(this.t);//防止多次点击并创建多个计时器/p
pthis.tsetinterval()>/p
pvvrstthis.message.submission(0,1);//拦截第一个字符串/p
pvarndthis.message.submission(1);//截断剩余的字符串/p
p.messageensart;p
p,500)/p
p,/p
pstop()/p
pcleaninterval(this.t);/p
p/p
p/p
p/p
p</script>/p
p<scled>/p
p</style>/td
/tr
/tbody
/表
以上是本文的全部内容,希望能帮助您学习,也希望您更多的支持。/p
p/p

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.qitupic.com",如遇到无法解压的请联系管理员!

请激活正版授权 » 实现跑马灯效果的js和vue代码

常见问题FAQ