本文用js演示了如何生成一个动态的订单进度,下篇文章中我们将介绍如何利用css来实现,仿京东忘记密码步骤进度。
动态步骤
<div class="stepInfo">
<ul>
<li></li>
<li></li>
</ul>
<div class="stepIco stepIco1" id="create">
1
<div class="stepText" id="createText">
创建订单
</div>
</div>
<div class="stepIco stepIco2" id="check">
2
<div class="stepText" id="checkText">
审核订单
</div>
</div>
<div class="stepIco stepIco3" id="produce">
3
<div class="stepText" id="produceText">
生产
</div>
</div>
<div class="stepIco stepIco4" id="delivery">
4
<div class="stepText" id="deliveryText">
配送
</div>
</div>
<div class="stepIco stepIco5" id="received">
5
<div class="stepText" id="receivedText">
签收
</div>
</div>
</div>
js更改步骤
$(function() {
setTimeout("changeDivStyle();", 100); // 0.1秒后展示结果,因为HTML加载顺序,先加载脚本+样式,再加载body内容。所以加个延时
});
function changeDivStyle() {
// var o_status = $("#o_status").val(); //获取隐藏框值
var o_status = 4;
if (o_status == 0) {
$('#create').css('background', '#DD0000');
$('#createText').css('color', '#DD0000');
} else if (o_status == 1 || o_status == 2) {
$('#check').css('background', '#DD0000');
$('#checkText').css('color', '#DD0000');
} else if (o_status == 3) {
$('#produce').css('background', '#DD0000');
$('#produceText').css('color', '#DD0000');
} else if (o_status == 4) {
$('#delivery').css('background', '#DD0000');
$('#deliveryText').css('color', '#DD0000');
} else if (o_status >= 5) {
$('#received').css('background', '#DD0000');
$('#receivedText').css('color', '#DD0000');
}
}
<input type="hidden" value="" id="o_status" />
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791