会员等级进度功能前端实现

http://www.cnblogs.com/starof/p/5718977.html

一、切图

1、效果

真实效果如下。

为说明问题只保留有用代码。进度条宽度用百分比来表示,这样适配时不需要重新计算。

2、切图代码

html代码如下:

复制代码
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" />
    <!--页面初始化CSS和页面公用头部的css-->
    <link rel="stylesheet" href="css/vipgrowth.css">
    <!--新增样式的css,名称可根据具体需求修改-->
    <script type="text/javascript" src="http://static9.pplive.cn/vip/201508/center/v_20150901140940/js/jquery-1.9.1.min.js"></script>
    <script>
window.onresize=function(){
    var winWidth = document.body.clientWidth;
    if(winWidth <=1230){
        body.className="grid-1010"; 
    }else  if (winWidth<= 1410){
        body.className="grid-1230"; 
    }else if (winWidth>1410){
        body.className="grid-1410"; 
    }else {
        alert("do not know!");
    }
}
</script>
</head>

<body id="body">
<script>//初始化状态显示样式判断,放在body后面
var winWidth = document.body.clientWidth;
 if(winWidth <=1230){
        body.className="grid-1010"; 
    }else  if (winWidth<= 1410){
        body.className="grid-1230"; 
    }else if (winWidth>1410){
        body.className="grid-1410"; 
    }else {
        alert("do not know!");
    }
</script>
    <div class="vg-body">
        <!--会员基本信息 开始-->
        <div class="vg_info ">
            <div class="vg_rank">
                <ul class="vg_rankBox cf"> 
                    <li >
                        <p class="vg_rankpoint">0</p>
                        <a class="vip vip1"></a>
                    </li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag"></em>
                            </span>
                        </p>
                    </li>
                    <li>
                      <p class="vg_rankpoint">600</p>
                        <a class="vip vip2"></a>
                    </li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag"></em>
                            </span>
                        </p>
                    </li>
                    <li>
                    <p class="vg_rankpoint">1800</p>
                        <a class="vip vip3"></a>
                    </li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag"></em>
                            </span>
                        </p>
                    </li>
                    <li>
                    <p class="vg_rankpoint">3600</p>
                        <a class="vip vip4"></a>
                    </li>
                    <li>
                        <p class="itembar">
                            <span class="middle">
                                <em class="vg_rank_flag"></em>
                            </span>
                        </p>
                    </li>
                    <li>
                    <p class="vg_rankpoint">6000</p>
                        <a class="vip vip5"></a>
                    </li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!--会员基本信息 结束-->
    </div>
</body>
<script>    
function lightCrown(viplevel){
    $(".vip").removeClass("light");
    for(var i=1;i<=viplevel;i++){
        var temp="vip"+i;
        $("."+temp).addClass("light");
    }
}
function lightProgressBar(viplevel){
    for(var j=0;j<viplevel-1;j++){
        $(".vg_rankBox").find(".middle").eq(j).css("width","100%");
    }
}
function lightFlag(viplevel){
    $(".vg_rankBox").find(".vg_rank_flag").eq(viplevel-1).css("display","block");
}
function calWidth(growthlevel){
    var cur;
    if (growthlevel==6000)return;
    if(0<=growthlevel&growthlevel<600){
        y=600;
        x=0;
        cur=0;
    }else if(600<=growthlevel&growthlevel<1800){
        y=1800;
        x=600;
        cur=1;  
    }else if(1800<=growthlevel&growthlevel<3600){
        y=3600;
        x=1800;
        cur=2;  
    }else if(3600<=growthlevel&growthlevel<6000){
        y=6000;
        x=3600;
        cur=3;  
    }
    var width=1-(y-growthlevel)/(y-x);
    $(".vg_rankBox").find(".middle").eq(cur).css("width",width*100+"%");
}
function viprank(viplevel,growthlevel){
    lightCrown(viplevel);
    lightProgressBar(viplevel);
    calWidth(growthlevel);
    lightFlag(viplevel);
}
viprank(2,1200);
</script>
</html>
复制代码

css代码如下:

  View Code

用到图片

3、切图分析

html结构如下:

复制代码
<!--会员基本信息 开始-->
        <div class="vg_info ">
            <div class="vg_rank">
                <ul class="vg_rankBox cf"> 
                    <li >
                        <p class="vg_rankpoint">0</p>
                        <a class="vip vip1 light "></a>
                    </li>
                    <li>
                        <p class="itembar"></p>
                    </li>
                    <li>
                      <p class="vg_rankpoint">600</p>
                        <a class="vip vip2 light"></a>
                    </li>
                    <li>
                        <p class="itembar">
                            <span class="middle" style="width:60px;">
                                <em class="vg_rank_flag"></em>
                            </span>
                        </p>
                    </li>
                    <li>
                    <p class="vg_rankpoint">1800</p>
                        <a class="vip vip3"></a>
                    </li>
                    <li>
                        <p class="itembar"></p>
                    </li>
                    <li>
                    <p class="vg_rankpoint">3600</p>
                        <a class="vip vip4"></a>
                    </li>
                    <li>
                        <p class="itembar"></p>
                    </li>
                    <li>
                    <p class="vg_rankpoint">6000</p>
                        <a class="vip vip5"></a>
                    </li>
                    <li></li>
                </ul>
            </div>
        </div>
        <!--会员基本信息 结束-->
复制代码
3.1点亮等级

 <a class="vip vip1 light "></a>代表,3个class,vip1表示等级为v1,light表示点亮。所以如果要点亮某个等级加class light即可。

3.2设置两个等级之间进度条满格

如上图,只需要设置class为middle的span的宽度为100%即可。

3.3显示小红旗

设置对应的class为vg_rank_flag的em的display属性为block即可。因为小红旗默认不显示。

二、js交互部分

1、思路

第一步:

传入参数:viplevel代表vip等级。growthlevel代表成长值。

第二步:

根据viplevel点亮<=viplevel等级的皇冠。【function1】

第三步:

v1:0<=growthlevel<600

v2:600<=growthlevel<1800

v3:1800<=growthlevel<3600

v4:3600<=growthlevel<6000

v5:6000=grothlevel

  • 根据viplevel点亮对应进度条。即设置span宽度100%。【function2】
  • 根据growthlevel判断
    • 如果growth=6000,不做任何操作。
    • 否则判断
    • 抽象一下公式
    • 所以根据growthlevel,判断得出y和x值,传入公司,计算并设置span的百分比。【function4】最后点亮小红旗。【function3】

2、代码实现

function1:

复制代码
function lightCrown(viplevel){
    $(".vip").removeClass("light");
    for(var i=1;i<=viplevel;i++){
        var temp="vip"+i;
        $("."+temp).addClass("light");
    }
}
复制代码

 function2:

function lightProgressBar(viplevel){
    for(var j=0;j<viplevel-1;j++){
        $(".vg_rankBox").find(".middle").eq(j).css("width","100%");
    }
}

 function3:

function lightFlag(viplevel){
    $(".vg_rankBox").find(".vg_rank_flag").eq(viplevel-1).css("display","block");
}

function4:

复制代码
function calWidth(growthlevel){
    var cur;
    if (growthlevel==6000)return;
    if(0<=growthlevel&growthlevel<600){
        y=600;
        x=0;
        cur=0;
    }else if(600<=growthlevel&growthlevel<1800){
        y=1800;
        x=600;
        cur=1;    
    }else if(1800<=growthlevel&growthlevel<3600){
        y=3600;
        x=1800;
        cur=2;    
    }else if(3600<=growthlevel&growthlevel<6000){
        y=6000;
        x=3600;
        cur=3;    
    }
    var width=1-(y-growthlevel)/(y-x);
    $(".vg_rankBox").find(".middle").eq(cur).css("width",width*100+"%");
}
复制代码

 整理一下调用过程就是:

复制代码
function viprank(viplevel,growthlevel){
    lightCrown(viplevel);
    lightProgressBar(viplevel);
    calWidth(growthlevel);
    lightFlag(viplevel);
}
viprank(2,1200);
复制代码

 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论,共同进步。 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现前端文件导出并获取后端导出进度,可以采用以下步骤: 1. 前端发送导出请求:前端通过HTTP请求向后端发送导出请求,并获取一个任务ID。任务ID可以用来后续查询导出进度和下载文件。 2. 后端处理导出任务:后端接收到导出请求后,开始处理导出任务。这可能涉及生成导出文件、执行复杂的数据处理操作等。在处理过程中,后端需要记录导出进度。 3. 后端记录导出进度:后端可以根据具体的导出任务情况,记录导出进度。这可以是一个百分比、已完成的记录数等。后端需要将导出进度保存在数据库或其他持久化存储中,以便前端后续查询。 4. 前端查询导出进度前端可以通过定时轮询或使用WebSocket等技术,向后端发送请求以查询导出进度前端需要将任务ID发送给后端,并从后端获取最新的导出进度信息。 5. 前端展示导出进度前端根据获取到的导出进度信息,更新UI界面展示当前的导出进度。这可以是一个进度条、文字描述等形式。 6. 导出完成并下载文件:当后端完成导出任务时,前端可以向后端发送下载请求,并提供任务ID。后端根据任务ID找到相应的导出文件,并将文件返回给前端进行下载。 需要注意的是,具体的实现方式可能与后端技术栈、前端框架等有关。以上是一种常见的实现思路,你可以根据自己的项目需求和技术栈进行具体的实现。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值