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

最新推荐文章于 2024-05-23 16:18:54 发布

zdy0_2004

最新推荐文章于 2024-05-23 16:18:54 发布

阅读量2.2k

点赞数

分类专栏： javascript 文章标签： JavaScript

javascript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

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有问题欢迎与我讨论，共同进步。

zdy0_2004

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
会员等级进度功能前端实现

http://www.cnblogs.com/starof/p/5718977.html一、切图1、效果真实效果如下。为说明问题只保留有用代码。进度条宽度用百分比来表示，这样适配时不需要重新计算。2、切图代码html代码如下：DOCTYPE HTML>html>head> meta charset="ut
复制链接

扫一扫

专栏目录