I don't know much about the background, so here I have made a method for users to input parameters themselves to simulate the process of reading parameters from the background. Copy code The code is as follows: <br>*{margin:0; padding:0;} <br>.uInfo{width:200px; padding:10px;} <br>h3{margin:10px 0;} <br>#level{width:150px; height: 6px; border:1px solid #ccc; cursor:pointer;} <br>#le{height:6px; width:0;display:block; background:#f00; font-size:0;} <br>label{margin -left:10px;} <br>#showTime{display:none; color:#f00; line-height:24px; font-size:12px;} <br> <br>function userInfo(){ <br>var allTime = document.getElementById("allTime").value; <br>var onTime = document.getElementById("onTime").value; <br>var level = document.getElementById("level"); <br>var le = document.getElementById("le"); <br>if(allTime == onTime){ <br>le.style.width = 100 "%"; <br>} <br>else if(onTime == 0){ <br>le.style.width = 0; <br>} <br>else{ <br>countPercent(onTime,allTime,level ,le); <br>} <br>} <br>function countPercent(onHours,allHours,level,le){ <br>var floatNum = onHours/allHours; <br>var percent = floatNum.toFixed("2" ); <br>var toPercent; <br>if(percent == 1.00){ <br>toPercent = 99; <br>} <br>else if(percent == 0.00){ <br>toPercent = 1; <br>} <br>else{ <br>toPercent = percent.substring(2); <br>} <br>le.style.width = toPercent "%"; <br>var showTime = document.getElementById("showTime "); <br>level.onmouseover = function(){ <br>showTime.style.display = "block"; <br>showTime.innerHTML = "Online duration:" onHours "/" allHours; <br>} <br>level.onmouseout = function(){ <br>showTime.innerHTML = ""; <br>showTime.style.display = "none"; <br>} <br>} <br> User Level Online time:This level Time required:
