进度条的运用


开发工具与关键技术:vs与jquery

作者:戴怡斌 

撰写时间:2019年5月26日

进度条大家绝不陌生,玩过游戏的就更清楚了,代表的意思吗,对玩游戏的人来说加载场景,对浏览网页的人来说就是等待,加载的意思。

进度条运用非常广泛,样式也是种类繁多,也可以配合其他代码一起使用。

进度条还可应用于许多业务场景,如任务完成进度、loading等等,是一种较为直观的表达元素。

推荐使用插件,也不要问我为什么,用来就知道了,进度条我用layui里面的进度条插件。

<link href="~/Hospital Outpatient/layui/css/layui.css" rel="stylesheet" />

因为进度条需要加载事件,所以还要引用js,js才是主要的,因为进度条在layui插件里特别依赖element组件,至于为什么特别依赖,后面就知道了

<script src="~/Hospital Outpatient/layui/layui.js"></script>

Layui插件里面有两种样式也就是尺寸,颜色很多,自己喜欢就好。

一种是百分比显示,第二种是分数显示,而默认的百分比文本不会显示,
在这里插入图片描述
小的进度条数字会在进度条的上面,大号进度条则是数字在进度条的里面。

如果你不想要这些数字显示,或者看着这些数字碍眼,你也可以不然他们显示,其实默认就不显示数字或百分比,

如果你想开启,对属性lay-showPercent设置任意值即可,随便一个单词就可以。但如果你不想显示,千万不要设置什么no或者false,直接删除该属性即可。
在这里插入图片描述
就像图中一样把lay-showPercent直接删掉就可以,就不会开启数字显示了。
在这里插入图片描述
Js部分很简单,正确的说是有插件很简单,都不敢相信,如果你没写element这个单词,那你js部分就全部失败,然后进度条就不会显示(真的特别依赖)。

进度条可以和很多东西一起使用,比如时间选择器。

当你全部敲完之后,在检查一遍,运行。效果图
在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章