我正在尝试使用phonegap在javascript中创建一个进度条，事情是我从Android手机获取手机触点，所以如果一个手机有大约400个联系人，它需要几秒钟来重新检查联系人，直到那时我想要显示一个进度条，我创建了它，但提到的行
document.getElementById("myBar").style.width=val + '%';
我没有工作。我从for循环中获取值以增加进度条宽度我已经提到过代码
<!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 + '%');
}