碼上快樂

相關內容    簡體    繁體

會員等級進度功能前端實現

本文轉載自   查看原文   2016-08-01 17:00   3482    jQuery/ web/ rank/ processbar

一、切圖

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>
View Code

css代碼如下：

@charset "utf-8";
html,body{
    background-color: #f6f5f5;
}

.vg-body{
    width: 1390px;
    margin:0 auto;
}
.vg_info{
    height: 156px;
    margin-top: 20px;
    padding:30px 0 0 32px;
    border: 1px solid #c8c8c8;
    border-top: 2px solid #e65a5a;
    background-color: #fff;
}
/*會員等級進度*/ 
.vg_rank{
    width: 980px;
    float: right;
}
.vg_rankBox li{
    float: left;
}
.vg_rankBox .vip{
    display: block;
    cursor: pointer;
    width: 56px;
    height: 56px;
    background: url(../images/vip-grow-rank.png) no-repeat;
}
.vg_rankBox .vip1 {
    background-position: 0 -65px;
}
.vg_rankBox .vip1.light {
    background-position: 0 0;
}
.vg_rankBox .vip2 {
    background-position: -56px -65px;
}
.vg_rankBox .vip2.light {
    background-position: -56px 0;
}
.vg_rankBox .vip3 {
    background-position: -112px -65px;
}
.vg_rankBox .vip3.light {
    background-position: -112px 0;
}
.vg_rankBox .vip4 {
    background-position: -168px -65px;
}
.vg_rankBox .vip4.light {
    background-position: -168px 0px;
}
.vg_rankBox .vip5 {    
    background-position: -225px -65px;
}
.vg_rankBox .vip5.light {    
    background-position: -225px 0px;
}
 .vg_rankBox .itembar{
     width: 166px;
     height: 12px;
     margin-top: 38px;
     background-color: #ffdcdc;
     border:2px solid #ffdcdc;

 }
 .vg_rankBox .itembar .middle{
     display: block;
     height: 12px;
     background-color: #e65a5a;
    position: relative;
    width: 0%;
 }
 .vg_rank_flag{
     width: 13px;
     height: 33px;
     background: url(../images/flag.png) no-repeat;
     position: absolute;
     right:-10px;
     top:-21px;
    display:none;
 }


.vg_rankpoint{
    text-align: center;
    font-size: 12px;
    color:#b4b4b4;
}


/*grid-1230*/
.grid-1230 .vg-body{
    width: 1210px;
}
.grid-1230 .vg-formulaBox{
    width:960px;
}
.grid-1230 .vg_rankBox .itembar{
    width: 124px;
}
.grid-1230 .vg_rank{
    width: 820px;
}

.grid-1230 .vg_tasklist{
    width: 1090px;
}
.grid-1230 .vg_tasklist li{
    margin-right: 16px;
}

.grid-1230 .vg_task .arrowbtn-left{
    left: 33px;
}
.grid-1230 .vg_task .arrowbtn-right{
    right: 33px;
}
.grid-1230 .vg_growth_table {
    padding:24px 30px;
}
/*grid-1010*/
.grid-1010 .vg-body{
    width: 990px;
}

.grid-1010 .vg-banner {
    background: url(../images/vg-banner-990.jpg) no-repeat center top;
}
.grid-1010 .vg_headinfo{
    width:190px;
}
.grid-1010 .vg_rank{
    width: 645px;
}
.grid-1010 .vg_info{
    padding-left: 14px;
}
.grid-1010 .vg-formulaBox{
    width:935px;
}
.grid-1010 .vg_rankBox .itembar{
    width: 84px;
}
.grid-1010 .vg_tasklist{
    width: 850px;
}
.grid-1010 .vg_tasklist li{
    margin-right: 35px;
}

.grid-1010 .vg_task .arrowbtn-left{
    left: 30px;
}
.grid-1010 .vg_task .arrowbtn-right{
    right: 30px;
}

.grid-1010 .vg_growth_table {
    padding:24px;
}
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有問題歡迎與我討論，共同進步。 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 會員體系、積分、等級 Vue--element實現刪除會員功能 MVC應用程序實現會員登錄功能 前端網頁加載進度條的實現 前端實現打印功能 前端--收藏功能的實現 前端實現復制功能 h5實現手機端等級進度條 VueJS 前端實現分頁功能 前端頁面搜索功能實現
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM