Several methods of javascript progress bar-JS Tutorial-php.cn

Several methods of javascript progress bar

高洛峰

Release： 2016-12-16 16:38:53

Original

1164 people have browsed it

Let’s take a look at the final effect first:

Several methods of javascript progress bar

The first step is to basically build the basic code and see the effect demonstration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

Copy after login

The second step is to add text display to the progress bar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

Copy after login

The principle is to use relative Positioning and absolute positioning, and then control the progress through different backgrounds. Next we look at the second way to create a progress bar.

The third step, the second way to make a progress bar---directly use pictures + background pictures

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0;

Copy after login

The principle of this method is to use an img picture, and then set a background picture for the img picture, through the background picture background position property to display different parts.

Of course, this method has some requirements for pictures. If you look carefully, you will find that the width is 2 times that of img.
In addition, the picture must be transparent gif, which means hollow. hehe. No progress bar is visible. In the example, background-position is the px value. In fact, you can use % to control it more accurately, such as: background-position:80% 50%; etc.
In general, this should be considered a skill and can be used in actual projects.

Step 4, Application
Finally we look at a simple application:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style> 
*{

Copy after login

Use animate to control the background-position of the image to achieve the progress bar effect.

Of course you can also use the first method. What needs to be changed in the first method is the width attribute of the progress bar.

For more javascript progress bar related articles, please pay attention to the PHP Chinese website!