WinXP Progress Bar 进度条

转载至：http://www.dynamicdrive.com/dynamicindex11/xpprogressbar.htm

Author: Brian Gosselin | Homepage

Description: A great looking pure DHTML progress bar that resembles the one seen in Window XP's startup screen. All visual aspects of the bar can be customized, and the script can be invoked multiple times to display multiple bars on the same page. Script works in both IE5+ and NS6+.

Note that this script by default doesn't perform any action other than animating the progress bar. It's up to you to create helper functions to accomplish any relevant tasks.

Demo:

 

 

---

Directions: 

Step 1: Insert the following script in the HEAD section of your page

Select All

The above script references an external .js file, which you can download below:

xp_progress.js (download by right clicking, and selecting "Save As")

Be sure to upload this .js file to your web server.

Step 2: Within the BODY of your page where you wish the Progress Bar to appear, add the below script:

<script type="text/javascript">
var bar1= createBar(300,15,'white',1,'black','blue',85,7,3,"");
</script>

That's it! Read on for an explanation of each parameter within function createBar().

Explanation of parameters within createBar()

To customize the look of the progress bar, simply pass in different values into createBar():

var xyz = createBar(width, height, backgroundColor, borderWidth, borderColor, blockColor, scrollSpeed, blockCount, actionCount, actionString)

 They are:

• xyz - An arbitrary variable name to store the bar reference and must be unique. This variable will have a few different methods (explained later) which can be used to control some of each bar's behavior. This variable IS REQUIRED if you wish to use these methods. However, if you do not plan to use the methods, then the variable assignment is not necessary, but it won't hurt to use it anyway.
• width- Total width of the entire bar in pixels.
• height- Total height of the entire bar in pixels.
• backgroundColor- Background color of the bar. Use valid CSS color or HEX color code value.
• borderWidth- The width of the border around the bar, in pixels.
• borderColor- The color of the border around the bar. Use valid CSS color or HEX color code value.
• blockColor- The darkest color of the individual blocks. The color will progressively become more transparent. Use valid CSS color or HEX color code value.
• scrollSpeed- The delay, in milliseconds, between each scroll step. Use smaller values for faster scroll speeds.
• blockCount- The total number of blocks to use.
• actionCount - The number of times the bar is to scroll before actionString is performed.
• actionString - The javascript function, in string form, to execute once the bar has scrolled actionCount times. Set this to an empty string to do nothing. If doing nothing, you can use any number as actionCount.

So for example, by changing the parameter settings, you can display a different looking Progress Bar, and one that executes a function after the Progress Bar has scrolled 3 cycles:

<script type="text/javascript">
var bar2= createBar(320,15,'white',1,'black','green',85,7,3,"alert('Hi there')");
</script>

 

 

(alert message disabled in actual demo).

Explanation of methods() to control the progress bar

Each bar, when assigned to a variable (ie: bar2) has several control methods you can call directly via javascript or in a link. These methods allow you to do things like pause the Progress Bar, hide or reveal it. Each of these is described below, along with an example which will control the bar above.

Method	Example	Description
var.toggleBar()	toggle pause	This method will toggle the pause status of the bar. If it is paused, it will un-pause it, and vice-versa. The code for the link at left is: <a href="javascript:bar2.togglePause()">toggle pause</a>
var.hideBar()	Hide Bar 2	This method will show the bar. If it is already visible, it will do nothing. The code for the link at left is: <a href="javascript:bar2.hideBar()">Hide Bar 2</a>
var.showBar()	Show Bar 2	This method will hide the bar. If it is already hidden, it will do nothing. The code for the link at left is:  <a href="javascript:bar2.showBar()">Show Bar 2</a>

Try clicking the links in the middle column to see how it affects the green Progress Bar.

Just in case you're confused how all this fits together, here's an example that scrolls a Progress Bar for 5 cycles before pausing and redirects to another page:

<script type="text/javascript">

function redirectpage(){
bar3.togglePause()
window.location="http://www.javascriptkit.com"
}

var bar3= createBar(320,15,'white',1,'black','red',85,7,5,"redirectpage()");
</script>