<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
lang=
"zh-TW"
xml:lang=
"zh-TW"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>Progress Bar</title>
<style>
.progressbar {
position: relative;
border: 1px solid
#fff;
background-color:
#ffcccc;
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(
#ffcccc),
color-stop(50%,
#fff),
to(
#ffcccc));
background-image: -webkit-linear-gradient(
top,
#ffcccc 0%,
#fff 50%,
#ffcccc 100%);
background-image: -moz-linear-gradient(
top,
#ffcccc 0%,
#fff 50%,
#ffcccc 100%);
background-image: -o-linear-gradient(
top,
#ffcccc 0%,
#fff 50%,
#ffcccc 100%);
background-image: -ms-linear-gradient(
top,
#ffcccc 0%,
#fff 50%,
#ffcccc 100%);
}
.pb-fluid {
position: absolute;
top: 0px;
left: 0px;
height: inherit;
-webkit-transition: width .6s ease;
-moz-transition: width .6s ease;
-o-transition: width .6s ease;
-ms-transition: width .6s ease;
transition: width .6s ease;
background-color:
#ff0000;
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(
#ffcccc),
color-stop(50%,
#ff0000),
to(
#ffcccc));
background-image: -webkit-linear-gradient(
top,
#ffcccc 0%,
#ff0000 50%,
#ffcccc 100%);
background-image: -moz-linear-gradient(
top,
#ffcccc 0%,
#ff0000 50%,
#ffcccc 100%);
background-image: -o-linear-gradient(
top,
#ffcccc 0%,
#ff0000 50%,
#ffcccc 100%);
background-image: -ms-linear-gradient(
top,
#ffcccc 0%,
#ff0000 50%,
#ffcccc 100%);
}
</style>
</head>
<body>
<div id=
"container"
style=
"position:relative;"
></div>
<script type=
"text/javascript"
>
function
ProgressBar() {
var
width = 500;
var
height = 3;
var
objects = {};
var
max = 1;
var
value = 0;
var
_redraw =
function
() {
if
(objects.main) {
objects.fluid.innerHTML =
""
;
objects.text.innerHTML =
""
;
objects.main.innerHTML =
""
;
objects.main.parentNode.removeChild(objects.main);
}
objects.main = document.createElement(
"div"
);
objects.main.className =
"progressbar"
;
objects.main.style.width = width +
"px"
;
objects.main.style.height = height +
"px"
;
objects.fluid = document.createElement(
"div"
);
objects.fluid.className =
"pb-fluid"
;
objects.main.appendChild(objects.fluid);
}
var
_setfluid =
function
(){
if
(!objects.main) _redraw();
var
percentage;
if
(max<=0) {
percentage=0;
}
else
if
(value<0) {
percentage=0;
}
else
if
(value>=max) {
percentage=1;
}
else
{
percentage=value/max;
}
objects.fluid.style.width = Math.round(percentage*width) +
"px"
;
}
this
.appendTo =
function
(target) {
if
(!objects.main) {
_redraw();
}
target.appendChild(objects.main);
}
this
.jump =
function
() {
if
(!objects.main)
return
;
if
(objects.main.parentNode) {
var
parent=objects.main.parentNode;
}
_redraw();
_setfluid();
if
(parent) {
parent.appendChild(objects.main);
}
}
this
.setWidthHeight =
function
(newwidth, newheight) {
if
(newwidth) {
width = newwidth;
}
if
(newheight) {
height = newheight;
}
_redraw();
_setfluid();
}
this
.setValueMax =
function
(newvalue, newmax) {
value = newvalue;
max = newmax;
_setfluid();
}
this
.setValue =
function
(newvalue) {
value = newvalue;
_setfluid();
}
this
.setMax =
function
(newmax) {
max = newmax;
_setfluid();
}
this
.getValue =
function
() {
return
value;
}
this
.getMax =
function
() {
return
max;
}
}
var
myProgressBar =
new
ProgressBar();
myProgressBar.setValueMax(0, 10);
myProgressBar.setValue(5);
myProgressBar.appendTo(document.getElementById(
"container"
));
</script>
<p>
<button onclick=
"myProgressBar.setValue(myProgressBar.getValue()+1);"
>Increase Value</button>
<button onclick=
"myProgressBar.setValue(myProgressBar.getValue()-1);"
>Decrease Value</button>
</p>
</body>
</html>