Я пытаюсь создать индикатор выполнения в Javascript, он не работает

Я пытаюсь создать индикатор выполнения в javascript с помощью phonegap. То, что я получаю phonecontacts от android mobile, поэтому, если у мобильного есть около 400 контактов, требуется несколько секунд для извлечения контактов до тех пор, пока я не хочу показывать индикатор выполнения, Я создал его, но указанная строка document.getElementById("myBar").style.width=val + '%'; не работает. Я получаю значение from for loop для увеличения ширины полосы выполнения, о которой я упомянул ниже.

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

        <style>
            #myProgress {
            position: relative;
            width: 100%;
            height: 30px;
            background-color: #ddd;
            }

            #myBar
            {
            position: absolute;
            width: 1%;
            height: 100%;
            background-color: #4CAF50;
            }
        </style>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
        <!-- Jquery mobile -->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/manual.js"></script>

        <title>Contacts App</title>
    </head>
    <body >
    <div data-role="page" id="pageone">
            <div data-role="header" data-position="fixed" data-theme='b'>
                <a href="#" data-role="button"  data-icon="grid" id="oneclick" data-rel="popup">View</a> <h1>Welcome To My Contacts Page</h1>
                <a href="#" data-role="button"  data-icon="grid"  id="done1" >Done</a>
            </div>
           <div data-role="main" class="ui-content">

           <ul data-role="listview" id="contactList" data-inset="true">

           </ul>

               <!--<div data-role='popup' id='progressbar' style='margin-left:55px; margin-top:250px;'>-->
               <!--</div>-->
               <!--<div id="myProgress" data-role='popup' style='margin-left:100px; margin-top:250px;'>-->
                   <!--<div id="myBar"></div>-->
               <!--</div>-->

               <div id="myProgress">
                   <div id="myBar"></div>
               </div>


           </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>


    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed" data-theme='b'>
            <a href="" data-role="button"  data-icon="grid" id="" >View</a> <h1>Welcome To My Second Page</h1>
            <a href="#pageone" data-role="button"  data-icon="grid"  >Back</a>
        </div>

        <div data-role="main" class="ui-content">
            <a href="" data-role="button"  data-icon="grid" onclick="val();" >Click</a>
        </div>

        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>
    <script type="text/javascript">
            app.initialize();

        </script>
    </body>
    </html>

Кодирование Javascript:

var app = {
    initialize: function() {
      this.bindEvents();
    },
    bindEvents: function()
    {
       document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function()
    {

       var clicklibrary = document.getElementById("oneclick");
                   clicklibrary.addEventListener("click",app.FetchContacts,false);

                },

                     FetchContacts:function()
                    {

                    navigator.contacts.find([navigator.contacts.fieldType.displayName],app.gotContacts,app.errorHandler);

                    },


                         gotContacts:function(c)
                        {
                              console.log("gotContacts, number of results "+c.length);


                                $("#contactList").empty();


                                var names = [];
                               for(var i=0, len=c.length; i<len; i++)
                               {
                               if(c[i].phoneNumbers && c[i].phoneNumbers.length > 0)
                               {

                                 var per =   Math.round((i / c.length) * 100);

                                  $('#contactList').append('<li>' +
                                     '<a href="#" style="padding:0px !important; margin:0px !important;">' +
                                       '<label style="margin:0px !important; border:0px !important;"' +
                                         '' +
                                         '<div>' +
                                           '<h3>'+c[i].displayName+'</h3>' +
                                           '<p>'+c[i].phoneNumbers[0].value+'</p>' +
                                           '<input name="chk_history" id="chk_history" type="checkbox" data-name="'+c[i].displayName+':'+c[i].phoneNumbers[0].value+'"/>' +
                                         '</div>' +
                                       '</label>' +
                                     '</a>' +
                                     '<a href="#pg_history-view"  class="nav-container" ></a>'+
                                     '</li>');

                                 $("input[name=chk_history]").checkboxradio();
                                 $('#ul_history_list').listview('refresh');

                               }

                              progressfunc(per);
                        }

                         document.getElementById("myProgress").style.display = 'none';

                        },

                           errorHandler:function(e)
                             {
                               console.log("errorHandler: "+e);
                             },

                };

                function progressfunc(val)
                {

                document.getElementById("myBar").style.width=val + '%';
                console.log("==================> Function fired:"+val + '%');

                }

javascript,jquery,html,css,cordova,

0

Ответов: 0

Я пытаюсь создать индикатор выполнения в Javascript, он не работает

Я пытаюсь создать индикатор выполнения в javascript с помощью phonegap. То, что я получаю phonecontacts от android mobile, поэтому, если у мобильного есть около 400 контактов, требуется несколько секунд для извлечения контактов до тех пор, пока я не хочу показывать индикатор выполнения, Я создал его, но указанная строка document.getElementById("myBar").style.width=val + '%'; не работает. Я получаю значение from for loop для увеличения ширины полосы выполнения, о которой я упомянул ниже.

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

        <style>
            #myProgress {
            position: relative;
            width: 100%;
            height: 30px;
            background-color: #ddd;
            }

            #myBar
            {
            position: absolute;
            width: 1%;
            height: 100%;
            background-color: #4CAF50;
            }
        </style>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
        <!-- Jquery mobile -->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/manual.js"></script>

        <title>Contacts App</title>
    </head>
    <body >
    <div data-role="page" id="pageone">
            <div data-role="header" data-position="fixed" data-theme='b'>
                <a href="#" data-role="button"  data-icon="grid" id="oneclick" data-rel="popup">View</a> <h1>Welcome To My Contacts Page</h1>
                <a href="#" data-role="button"  data-icon="grid"  id="done1" >Done</a>
            </div>
           <div data-role="main" class="ui-content">

           <ul data-role="listview" id="contactList" data-inset="true">

           </ul>

               <!--<div data-role='popup' id='progressbar' style='margin-left:55px; margin-top:250px;'>-->
               <!--</div>-->
               <!--<div id="myProgress" data-role='popup' style='margin-left:100px; margin-top:250px;'>-->
                   <!--<div id="myBar"></div>-->
               <!--</div>-->

               <div id="myProgress">
                   <div id="myBar"></div>
               </div>


           </div>
        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>


    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed" data-theme='b'>
            <a href="" data-role="button"  data-icon="grid" id="" >View</a> <h1>Welcome To My Second Page</h1>
            <a href="#pageone" data-role="button"  data-icon="grid"  >Back</a>
        </div>

        <div data-role="main" class="ui-content">
            <a href="" data-role="button"  data-icon="grid" onclick="val();" >Click</a>
        </div>

        <div data-role="footer" data-position="fixed">
            <h1>Footer Text</h1>
        </div>
    </div>
    <script type="text/javascript">
            app.initialize();

        </script>
    </body>
    </html>

Кодирование Javascript:

var app = {
    initialize: function() {
      this.bindEvents();
    },
    bindEvents: function()
    {
       document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function()
    {

       var clicklibrary = document.getElementById("oneclick");
                   clicklibrary.addEventListener("click",app.FetchContacts,false);

                },

                     FetchContacts:function()
                    {

                    navigator.contacts.find([navigator.contacts.fieldType.displayName],app.gotContacts,app.errorHandler);

                    },


                         gotContacts:function(c)
                        {
                              console.log("gotContacts, number of results "+c.length);


                                $("#contactList").empty();


                                var names = [];
                               for(var i=0, len=c.length; i<len; i++)
                               {
                               if(c[i].phoneNumbers && c[i].phoneNumbers.length > 0)
                               {

                                 var per =   Math.round((i / c.length) * 100);

                                  $('#contactList').append('<li>' +
                                     '<a href="#" style="padding:0px !important; margin:0px !important;">' +
                                       '<label style="margin:0px !important; border:0px !important;"' +
                                         '' +
                                         '<div>' +
                                           '<h3>'+c[i].displayName+'</h3>' +
                                           '<p>'+c[i].phoneNumbers[0].value+'</p>' +
                                           '<input name="chk_history" id="chk_history" type="checkbox" data-name="'+c[i].displayName+':'+c[i].phoneNumbers[0].value+'"/>' +
                                         '</div>' +
                                       '</label>' +
                                     '</a>' +
                                     '<a href="#pg_history-view"  class="nav-container" ></a>'+
                                     '</li>');

                                 $("input[name=chk_history]").checkboxradio();
                                 $('#ul_history_list').listview('refresh');

                               }

                              progressfunc(per);
                        }

                         document.getElementById("myProgress").style.display = 'none';

                        },

                           errorHandler:function(e)
                             {
                               console.log("errorHandler: "+e);
                             },

                };

                function progressfunc(val)
                {

                document.getElementById("myBar").style.width=val + '%';
                console.log("==================> Function fired:"+val + '%');

                }
00JavaScript, JQuery, HTML, CSS, Cordova,
Похожие вопросы