android会员等级进度条,一个原生的用户等级的进度条

本人对后台不是太了解，所以这里做成了用户自己输入参数的办法来模拟从后台读参数的过程。

*{margin:0; padding:0;}

.uInfo{width:200px; padding:10px;}

h3{margin:10px 0;}

#level{width:150px; height:6px; border:1px solid #ccc; cursor:pointer;}

#le{height:6px; width:0;display:block; background:#f00; font-size:0;}

label{margin-left:10px;}

#showTime{display:none; color:#f00; line-height:24px; font-size:12px;}

function userInfo(){

var allTime = document.getElementById("allTime").value;

var onTime = document.getElementById("onTime").value;

var level = document.getElementById("level");

var le = document.getElementById("le");

if(allTime == onTime){

le.style.width = 100+"%";

}

else if(onTime == 0){

le.style.width = 0;

}

else{

countPercent(onTime,allTime,level,le);

}

}

function countPercent(onHours,allHours,level,le){

var floatNum = onHours/allHours;

var percent = floatNum.toFixed("2");

var toPercent;

if(percent == 1.00){

toPercent = 99;

}

else if(percent == 0.00){

toPercent = 1;

}

else{

toPercent = percent.substring(2);

}

le.style.width = toPercent+"%";

var showTime = document.getElementById("showTime");

level.onmouseover = function(){

showTime.style.display = "block";

showTime.innerHTML = "在线时长:"　+ onHours +"/"+ allHours;

}

level.onmouseout = function(){

showTime.innerHTML = "";

showTime.style.display = "none";

}

}

用户等级

在线时间:本级所需时间: