jQuery动态生成订单进度

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

动态步骤

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