跳转的进度条怎么做

 时间:2024-11-21 05:22:10

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实现简约导航菜单
  • 热门搜索
    233是什么意思 怀孕喝什么汤好 卡哇伊是什么意思 硬盘的作用 汗颜是什么意思 什么作文最好写 酵母菌的作用 人的一生什么最重要 姘头是什么意思 精华液的作用