jQuery动态生成订单进度

本文用js演示了如何生成一个动态的订单进度，下篇文章中我们将介绍如何利用css来实现，仿京东忘记密码步骤进度。

分类：其它特效 > jQuery插件难易：初级

查看演示下载资源下载积分： 20 积分

动态步骤

<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" />