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=' X-UA-Compatible ' content=' ie=edge ' script src=' http :/Vue/Vue。js /脚本链接href=' lib/bootstrap-3。3 .7/CSS/bootstrap。CSS“rel=”外部no跟随“rel=”样式表标题跑马灯/title style type=' text/CSS ' # app button { outline : none；}/style/head body div id=' app ' style=' margin 3360 20px ' button class=' BTN BTN-info ' @ click=' lang '飞的速度/button button class=' BTN BTN-信息' @ click=' stop '猥琐发育/button div H4 style=' color : red“{ msg } }/H4 img src=' http : buxiang。JPEG ' alt=' '/div/div脚本var ve=new Vue({ El : ' # app '，data: { msg: '只有飞速的旋转，才可以止住为的泪水，忘记你的模样",intervalId: null，}，methods: { //动起来lang() { if (this.intervalId！=null)返回；这个。intervalid=设置间隔(()={//获取第一个字符var start=this.msg.substring(0，1) //获取第一个字符后面的所有字符var end=this。味精。substring(1)this。msg=end start }，300) }，//停止运动stop(){ clearInterval(这。intervalid)//重新赋值空这个。intervalid=null } })/脚本脚本src=' http : lib/jquery/jquery-3。4 .1 .js /脚本脚本src=' http : lib/bootstrap-3。3 .7/js/bootstrapjs /脚本/正文/html效果

总结

以上所述是小编给大家介绍的某视频剪辑软件使用计时器实现跑马灯效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！