使用vue制作一个跑马灯效果

 时间:2024-10-27 05:49:41

1、下图是小编这个小的跑马灯项目的目录结构,在根目录下的lib文件夹中放一个vue的js,然后创建一个跑马灯的html,如下图:

使用vue制作一个跑马灯效果

2、下图是小编的html中的代码,在页面中放置两个按钮,一个是启动按键,一个是停止跑马灯按键,然后有一个显示的区域,如下图:

使用vue制作一个跑马灯效果

3、下图是小编script中的代码,这里主要是创建vue等,接下来开始具体说明其中的作用,如下图:

使用vue制作一个跑马灯效果

4、el元素获取vue的控制区域,在data中设置全局变量的值,intervalId为定时器的id,如下图:

使用vue制作一个跑马灯效果

5、下图是启动按钮的代码,这里是判断当前全局的定时器id是否有值,如果有值,说明当前定时器已经启动,不需要再次启动,如果没有值,则开始启动,如下图:

使用vue制作一个跑马灯效果

6、下图是停止按钮的代码,这里是首先关闭定时器,然后经定时器的id置空,如下图:

使用vue制作一个跑马灯效果

7、然后启动浏览器,点击按钮查看字符串的跑马灯效果,如下图:

使用vue制作一个跑马灯效果
  • 梦幻西游2转回原服后曾用名不见了怎么办
  • 锤子手机怎么录入指纹?
  • 怎么在支付宝上查看高校录取通知书信息
  • 易语言点击按钮变换文字
  • AcFun如何开启允许在移动网络下播放
  • 热门搜索
    那曲旅游 cri环球旅游频道 张家界旅游团购 北京旅游风景区 旅游管理专业排名 旅游意外伤害保险 三亚旅游住宿攻略 山东青岛旅游景点 欧洲旅游最佳时间 珠海旅游必去景点