A native user-level progress bar_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

A native user-level progress bar_javascript skills

May 16, 2016 pm 06:23 PM

user level progress bar

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:

 
<!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 = "Online duration:" onHours "/" allHours; 
} 
level.onmouseout = function(){ 
showTime.innerHTML = ""; 
showTime.style.display = "none"; 
} 
} 
</script> 
</head> 
<body> 
<div class="uInfo"> 
<h3>User Level</h3> 
<p id=" level"><span id="le"></span></p> 
<P id="showTime"></p> 
</div> 
<div class="getNum"> 
<label>Online time:</label><input type="text" id="onTime" /><label>This level Time required:</label><input type="text" id="allTime" /> <input type="button" value="Show progress" onclick="userInfo()"> 
</div> 
</body> 
</html> 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn