一个原生的用户等级的进度条

　　做了一个用户等级的进度条，只是练手。

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

　　演示：

用户等级

 

 

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

　　

　　说明：只是简单功能，演示请输入有效数字，本级所需时间并不是指剩于时间，请正确输入。鼠标划过进度条，会显示升级信息。

 

　　查看源代码：

 

代码

<! DOCTYPE html >
< html >
< head >
< meta http - equiv = " content " content = " text/html charset=gb2312 " >
< style type = " text/css " >
* {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;}
</ style >
< script type = " text/javascript " >
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 " ;
}
}
</ script >
</ head >
< body >
< div class = " uInfo " >
< h3 > 用户等级 </ h3 >
< p id = " level " >< span id = " le " ></ span ></ p >
< P id = " showTime " ></ p >
</ div >
< div class = " getNum " >
< label > 在线时间: </ label >< input type = " text " id = " onTime " />< label > 本级所需时间: </ label >< input type = " text " id = " allTime " />& nbsp; < input type = " button " value = " 显示进度 " onclick = " userInfo() " >
</ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/joyan/archive/2010/07/02/1770124.html