跳转的进度条怎么做

 时间:2026-02-15 19:20:48

1、我们先引入layui有js脚本文件和css样式文件。

跳转的进度条怎么做

2、然后在html里添加二个div,这二个div需要的样式名称如图所示,需要严格匹配这些样式。

跳转的进度条怎么做

3、最后需要在脚本里渲染一样layui的element组件,调用render方法就行。

跳转的进度条怎么做

4、运行html页面,我们就可以看到一个漂亮的进度条了。但这个是静态的进度条,不会变化的,html代码里设置了百分比是多少就显示多少。

跳转的进度条怎么做

5、要制作一个动态变化的进度条,我们使用定时器来处理就行了。在div里,我们先添加一个lay-filter的属性,这个相当于设置一个id。

跳转的进度条怎么做

6、然后在脚本里添加一个定时器,定时器方法里,调用element的progress方法来设置进度条的进度: element.progress('jy', n+'%');  其中的第一个参数jy就是我们刚设置的lay-filter的值。

跳转的进度条怎么做

7、完善一下,当进度条的数值大于100时,就把定时器撤掉,停止添加数值。

跳转的进度条怎么做

8、再次运行页面,可以看到一个动态的进度条了。

跳转的进度条怎么做

  • java返回数组中第一个非空元素
  • C#中如何进行MD5加密
  • 安装zookeeper,并配置集群
  • Excel如何十进制转换二进制
  • html+CSS3实现简约导航菜单
  • 热门搜索
    头皮屑多怎么治疗 麻辣小龙虾做法 小腿肌肉酸痛是怎么回事啊 论文怎么写 虎皮辣子的做法 玉米饼的家常做法 玉米烙的做法 窗花怎么贴 潺怎么读 炸黄花鱼的做法