A native user-level progress bar_javascript skills
May 16, 2016 pm 06:23 PMI 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.
<!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>

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to implement page loading progress bar function in JavaScript?

How to use Vue to implement progress bar effects

How to set the color of a progress bar using HTML and CSS?

Vue component development: implementation method of progress bar component

How to create a progress bar using HTML and CSS

How to use Vue and Element-UI to implement progress bar and loading animation effects

Create a progress bar using Javascript

PHP development: How to implement article reading progress bar and sharing function
