最新公告
  • 欢迎您光临奇兔源码社区,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 实现跑马灯效果的js和vue代码

    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

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    奇兔源码社区
    一个高级程序员模板开发平台

    发表评论