기본 사용자 수준 진행률 표시줄_javascript 기술

배경에 대해 잘 모르기 때문에 여기서는 사용자가 직접 매개 변수를 입력하여 배경에서 매개 변수를 읽는 과정을 시뮬레이션하는 방법을 만들었습니다.

코드 복사 코드는 다음과 같습니다.

;
*{여백:0;}
.uInfo{너비:200px; 패딩:10px;}
h3{margin:10px 0;}
#레벨{너비:150px ; 높이: 6px; 테두리: 1px 커서:포인터;}
#le{height:6px; 배경:#f00; label{margin -left:10px;}
#showTime{display:none; color:#f00; line-height:24px; 글꼴 크기:12px;}
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 rates = floatNum.toFixed( "2" );
var toPercent;
if(percent == 1.00){
toPercent = 99;
}
else if(percent == 0.00){
toPercent = 1;
}
else{
toPercent = rates.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";
}
스크립트>

사용자 수준

div>

온라인 시간: 이 레벨에 필요한 시간: 🎜 >