CSS3 Transitions and JavaScript-powered Progress Bar
http://vote539-webdev.blogspot.com/2011/08/css3-transitions-and-javascript-powered.html
去文字修改版
<!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;
/* Original WebKit Syntax for Gradients */
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(#ffcccc),
color-stop(50%, #fff),
to(#ffcccc));
/* More Recent Syntax for Gradients */
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;
/* Here is where we declare the CSS3 Transitions.
* We have one line for each browser prefix, plus
* the future standard at the end.
*/
-webkit-transition: width .6s ease; /* WebKit (3.2+) Version */
-moz-transition: width .6s ease; /* Firefox (4+) Version */
-o-transition: width .6s ease; /* Opera (10.5+) Version */
-ms-transition: width .6s ease; /* Internet Explorer (10+?) Version */
transition: width .6s ease; /* Future Standard */
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.setWidthHeight(200, 18);
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>
