由于近期需要做一个订单进度条，比较直观的反应当前订单的状态，css样式借鉴了网上的相关代码，下面是效果图，以及实现说明

一.说明

1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多做说明，进度条CSS样式

<style type="text/css">
/*进度条start*/.order_status {height: 175px;padding-top: 90px;padding-left: 160px
}.order_status .s-step {float: left;width: 170px;height: 60px;position: relative;
}.order_status .s-step:nth-child(6n) {width: 0px;
}.order_status .s-step.active {float: left;width: 170px;height: 60px;position: relative;
}.order_status .s-step>b>b.active {background-color: #337ab7
}.order_status .s-step>b {display: block;width: 32px;height: 32px;line-height: 32px;border-radius: 32px;position: absolute;margin-left: -16px;top: -20px;z-index: 87
}.order_status .s-step>b>b {display: block;width: 26px;height: 26px;line-height: 26px;border-radius: 26px;background: #ccc;margin-top: 3px;margin-left: 3px;z-index: 88
}.order_status .s-step>p {width: 161px;border: 1px dashed #ddd;top: -20px;position: absolute;z-index: 86
}.order_status .s-step>p.active {width: 161px;border: 1px dashed #337ab7;top: -20px;position: absolute;z-index: 86
}.order_status .s-step em {display: block;padding-top: 20px;font-style: normal;text-align: center;color: #b7b7b7;font-size: 12px;margin-left: -65px;width: 130px
}.order_status .s-step>div {display: block;width: 80px;height: 32px;line-height: 32px;position: absolute;margin-left: -40px;top: -55px;z-index: 87;text-align: center;font-size: 12px;color: #c9c4c4
}.order_status .s-step>div.active {display: block;width: 80px;height: 32px;line-height: 32px;position: absolute;margin-left: -40px;top: -55px;z-index: 87;text-align: center;font-size: 12px;color: #337ab7
}/*步骤条end*/
</style>

2.页面相关代码

代码如下（示例）：

<p style="color: black; font-size: 15px; font-weight: bold">订单进度条：</p><div class="order_status"><span class="s-step s-step0"> <b> <b></b></b><p></p> <em><label id="orderTime"th:text="${orderInfo.orderTime}"></label></em><div>创建订单</div></span> <span class="s-step s-step1"> <b> <b></b></b><p></p> <em><label id="auditTime"th:text="${orderInfo.auditTime}"></label><input id="state"type="hidden" th:value="${orderInfo.orderStatus}" /></em><div>审核订单</div></span> <span class="s-step s-step2 "> <b> <b></b></b><p></p> <em><label id="productionTime"th:text="${orderInfo.productionTime}"></label></em><div>生产</div></span> <span class="s-step s-step3"> <b> <b></b></b><p></p> <em><label id="completTime"th:text="${orderInfo.completTime}"></label></em><div>完成生产</div></span> <span class="s-step s-step4"> <b> <b></b></b><p></p> <em><label id="deliveryTime"th:text="${orderInfo.deliveryTime}"></label></em><div>配送</div></span> <span class="s-step s-step5"> <b> <b></b></b> <em><label id="receivingTime"th:text="${orderInfo.receivingTime}"></label></em><div>签收</div></span></div>

3.JS部分代码，页面使用 themleaf模板

<script type="text/javascript" th:inline="javascript">/*<![CDATA[*///步骤条,圆点下面显示的时间var orderTime = document.getElementById("orderTime").innerText;var auditTime = document.getElementById("auditTime").innerText;var productionTime = document.getElementById("productionTime").innerText;var completTime = document.getElementById("completTime").innerText;var deliveryTime = document.getElementById("deliveryTime").innerText;var receivingTime = document.getElementById("receivingTime").innerText;var state = document.getElementById("state").value;if (orderTime != null && orderTime != '') {$(".s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em,.s-step5>em").hide();}if (auditTime != null && auditTime != '' && state == 1) {$(".s-step1>b>b,.s-step1>p,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step1>em").show();}if (productionTime != null && productionTime != '') {$(".s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step1>em,.s-step2>em").show();}if (completTime != null && completTime != '') {$(".s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step1>em,.s-step2>em,.s-step3>em").show();}if (deliveryTime != null && deliveryTime != '') {$(".s-step4>b>b,.s-step4>div,.s-step3>p,.s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em").show();}if (receivingTime != null && receivingTime != '') {$(".s-step5>b>b,.s-step5>div,.s-step4>p,.s-step4>b>b,.s-step4>div,.s-step3>p,.s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em,.s-step5>em").show();}/*]]>*/</script>

总结

举一个例子说明： if (orderTime != null && orderTime != ' ') {
           $(".s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");
           $(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em,.s-step5>em")
                   .hide();
       }

当后台传入的订单时间不为空，也就是已经创建了订单时，获取.s-step0的<p><div>标签，设置calss状态为“active”为可见，其他显示为hide,则创建订单显示为有色，其他都是灰色的。其他以此类推。

本质上可以理解为，如果从后台取到了相应的时间，比如下单、审核时间等，对所在的圆点上色显示即可！！！

CSS实现进度条和订单进度条相关推荐

Java文件下载，HTML进度条实时刷新进度
效果展示实现原理 1:后台同步进程开始下载文件 2:前台使用遮罩效果,使页面不能点击,使用circliful进度条插件(插件源码见后) 3:页面使用JavaScript定时器发送ajax请求刷新进度 ...
进度条(报名,活动进度条)
话不多说上效果图 (根据比例算出进度) Ps : 代码乱差,能手写出来不错了 //目前兼容移动端<div class="yyds">//提示当前已>已预约多少人& ...
基于腾讯 x5 开源库，提高 webView 开发效率，大概要节约你百分之六十的时间成本。该案例支持处理 js 的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常 error 状态、支持视频播放
YCWebView 项目地址:yangchong211/YCWebView 简介: 基于腾讯 x5 开源库,提高 webView 开发效率,大概要节约你百分之六十的时间成本.该案例支持处理 js 的交 ...
Java渐变进度条_Android ProgressBar自定义图片进度，自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
Xamarin XAML语言教程使用属性设置进度条的当前进度
Xamarin XAML语言教程使用属性设置进度条的当前进度在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式:一种是 ...
转：delphi用URLDownloadToFile下载文件，用进度条跟踪下载进度
用URLDownloadToFile下载文件,如何用进度条跟踪下载进度 1:OnDownloadProgress 2:可有否具体的例子. 3:unit Unit1; interface uses ...
【Android FFMPEG 开发】FFMPEG 视频播放进度控制 ( 显示播放进度 | 拖动进度条播放 )
文章目录 I . FFMPEG 播放进度控制 II . FFMPEG 播放视频 ( 效果展示 ) III . FFMPEG 获取视频时长 IV . FFMPEG 视频播放进度获取 V . FFMPEG ...
pgsql 前10条_白沙湾南片区11条新建道路最新进度及建成时间，已建成一条！还有一条将通车...
原标题:白沙湾南片区11条新建道路最新进度及建成时间,已建成一条!还有一条将通车近日,@白沙河畔从流亭街道办事处获悉:为了完善白沙湾南片区及仙家寨南片区路网及基础设施配套,为周边区域提供良好的生活 ...
android 进度条代码,Android进度条ProgressBar的实现代码
ProgressBar进度条当一个应用在后台执行时,前台界面不会有任何信息,这时,用户根本不知道程序是否在执行以及执行的进度等, 因此需要使用进度条来提示程序执行的进度. 而ProgressBar就 ...

CSS实现进度条和订单进度条

一.说明

总结

CSS实现进度条和订单进度条相关推荐

最新文章

热门文章