Example analysis of JavaScript controlling progress bar-JS Tutorial-php.cn

Example analysis of JavaScript controlling progress bar

黄舟

Release： 2017-11-21 11:36:52

Original

1500 people have browsed it

Before us, we introduced to you JavaScriptmethods to implement progress bar and implement the progress bar natively. So how to control the progress bar? The elements used by JS to control the progress bar are relatively simple. Just embed a span tag within a p tag. The outer layer of p is used as the background, and the inner layer of span is used for dynamic progress display, which is controlled by JS.

The overall code is as follows:

<!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>JS控制进度条</title>
    <style type="text/css">
        body
        {
            height:30px;
            width:330px;
            background-color:blue;
        }
        
        #ProgressBarBackgroundOne
        {
            background:url(ProgressBk.png) no-repeat 0 center;
            height:10px;
            width:300px;
        }
        #ProgressBarOne
        {
            background:url(ProgressFt.png) no-repeat 0 center;
            height:10px;
            width:0%;
            display:block;
        }
        
        #ProgressBarBackgroundTwo
        {
            background-color:White;
            height:10px;
            width:300px;
        }
        #ProgressBarTwo
        {
            background-color:Gray;
            height:10px;
            width:0%;
            display:block;
        }
        
    </style>
    <script type="text/javascript">
        var numOne = 0;
        var numTwo = 0;
        function SetProgressOne() {
            var ProgressOne = document.getElementById(&#39;ProgressBarOne&#39;);
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute(&#39;style&#39;, &#39;width:&#39; + numOne + &#39;%&#39;);
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById(&#39;ProgressBarTwo&#39;);
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute(&#39;style&#39;, &#39;width:&#39; + numTwo + &#39;%&#39;);
            setTimeout(SetProgressTwo, 500);
        }
        
    </script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>

Copy after login

In order to facilitate display, I wrote the css text and js script directly in the html document, This is a native js way to control the progress bar. It can also be written using js libraries such as Node.js or mootools.

SetProgressOne() uses pictures to display progress; SetProgressTwo() uses color to display progress. The principle is the same, and they all control the attributes of the span tag through JS: style="width :Default value %" is enough. In terms of performance, using images is better than using colors, because it is difficult to use colors to handle rounded corners. Not all browsers support the rounded corner properties of CSS. Here is a comparison of the effects:

Example analysis of JavaScript controlling progress bar

Summary:

Through the detailed study of this article, I believe that my friends have a better understanding of JavaScript control progress bar. I hope it will help you Work helps!

Related recommendations:

Example of JavaScript progress bar control implementation

Introduction to several methods of implementing progress bars in JavaScript

JavaScript implements the native code of the progress bar

The above is the detailed content of Example analysis of JavaScript controlling progress bar. For more information, please follow other related articles on the PHP Chinese website!