这是我目前的数组应用程序代码。我只是在输出数组编号时遇到了麻烦。
数组输出（100项）：
11,64,39,97,69,28,94,49,31,45,9,29,65,53,31,58,100,81,79,24,99,27,39,58,35,39,
10,24,98,26,84,70,42,93,17,69,69,17,12,4,21,75,86,25,82,32,69,21,42,24,42,100,
61,25,97,60,12,100,40,40,10,75,78,86,25,3,11,65,44,17,35,4,78,77,53,5,53,18,19,
26,31,51,6,68,58,49,54,27,58,6,98,51,79,21,32,38,34,35,83,70
在位置20插入的值99--在此执行了80次操作 插入
Here是我的JSFiddle。
<html>
<body>
<!--For moving element in center-->
<div style='width:400px;margin: 100px auto auto;'>
<!--To show the status of operation -->
<p id="status"></p>
<!--Some style to look page better-->
<!--Added id to every input element, to refer it in script-->
<!--change your input type to number, now it will only accept number.-->
<div class='box'>
<p>Enter Array Size:</p>
<input style="width: 50px;" type="number" value="100" id="etArraySize"/>
<input type="button" value="Create Array" id="btnCreateArray"/>
</div>
<div class='box'>
<p>Enter Location:</p>
<input type="number" value = "0" id="etArrayIndex"/>
<p>Enter Value to Insert:</p>
<input type="number" value="0" id="etArrayValue"/>
<input type="button" value="Insert Into Array" id="btnInsertValue"/>
</div>
<div class='box'>
<p>Enter Value to Find:</p>
<input type="number" value="0" id="etArrayFind"/>
<input type="button" value="Search Array" id="btnFindValue"/>
</div>
<!--It will display the operation count-->
<div class="box" id="counter">
</div>
</div>
</body>
<!--Simple yet beautiful style-->
<style>
.box{
padding: 2px 10px 10px;
background-color:#FAFAFA;
box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
border-radius: 2px;
margin:8px;
}
</style>
<script>
//Script started.
//global variable myArray.
var myArray;
//For count the number of operation when inserting,
var count=0;
//Reference all input element by their id to variable,
var etArraySize = document.getElementById("etArraySize");
var etArrayIndex = document.getElementById("etArrayIndex");
var etArrayValue = document.getElementById("etArrayValue");
var etArrayFind = document.getElementById("etArrayFind");
var btnCreateArray = document.getElementById("btnCreateArray");
var btnInsertValue = document.getElementById("btnInsertValue");
var btnFindValue = document.getElementById("btnFindValue");
var mStatus = document.getElementById("status");
//Adding click listener to all 3 buttons.
btnCreateArray.addEventListener("click",function(){
//If button create array click, create array of provided size in etArraySize.
createArray(etArraySize.value);
});
btnInsertValue.addEventListener("click",function () {
//Insert into array.
//parseInt will convert the text to integer.
//You may remove this, but this is good practise.
insertIntoArray(myArray,parseInt(etArrayIndex.value),parseInt(etArrayValue.value));
});
btnFindValue.addEventListener("click",function () {
//search the array.
SearchArray(myArray,parseInt(etArrayFind.value));
});
//create array function with a single param e means size of array.
function createArray(e){
//Convert the value in integer.
var val = parseInt(e);
//Initialize global myArray with given size.
myArray = Array(val);
//Loop through it's length.
for(var i=0;i<myArray.length;i++){
//Assign the random value which is between 1 <= x <= 100
myArray[i] = Math.floor(Math.random()*100)+1;
}
//Show the message at top of screen, where <p id="status"..... is defined.
showMessage("Array created of size " + val);
}
//Insert Array function.
function insertIntoArray(array,index,value) {
//First get the value which will replace by new value.
var oldValue = array[index];
//Now assign the new value to given index,
array[index] = value;
//You did new operation on array, count it by 1.
count++;
//Loop through array from its last index to given index + 2.
//because array[index] contains new value.
//array[index] + 1 contains the replace value, as it shift by one, (manually)
//and all other index also shift by one through loop.
for(var i=array.length-1; i>index+1;i--){
//shift value to upper index.
array[i] = array[i-1];
count++;
//Operation count ++.
}
//Check if the given index is not the last element.
if(index < array.length-1){
//After loop, put the replaceValue to arrayIndex[index+1]
array[index+1] = oldValue;
count++;
}
//Show the message at top.
showMessage("Added " + value + " at position " + index);
//Show the count at bottom.
showCount(count);
}
function SearchArray(array,value) {
//It will count the operation in SearchArray.
//If you want to count this operation with previous function,
//use count instead of searchCount.
var searchCount=0;
//to store the index, where the value is.
var foundIndex = -1;
//Loop through array and compare if the value exists at ith index or not.
for(var i=0;i<array.length;i++){
searchCount++;
//If yes, save the index, break the loop.
if(array[i] == value){
foundIndex = i;
break;
}
}
//Check if value is found or not.
//Display message according to operation.
if(foundIndex== -1){
showMessage("Element not found in array. Total Searched: " +searchCount);
}else{
showMessage("Element found at index: " + foundIndex + ", search count: " +searchCount);
showCount(searchCount);
}
}
function showMessage(e) {
//it will set the given message to mStatus, defined at top.
mStatus.innerHTML = e;
//You may remove setTimeOut function, it will just remove the message after
//5 second.
setTimeout(function () {
mStatus.innerHTML = "";
},5000);
}
//To display message at the bottom, change it according to your need.
function showCount(var e) {
document.getElementById("counter").innerText = "Operation count on array: " + e;
e = 0;
}
</script>
</html>
答案 0 :(得分：0)
我修改了一行代码。它现在似乎有效。 第186行：＆＃34;功能showCount（var e）{＆＃34; to＆＃34; function showCount（e）{＆＃34 ;; https://jsfiddle.net/c71wx59g/2/
<html>
<body>
<!--For moving element in center-->
<div style='width:400px;margin: 100px auto auto;'>
<!--To show the status of operation -->
<p id="status"></p>
<!--Some style to look page better-->
<!--Added id to every input element, to refer it in script-->
<!--change your input type to number, now it will only accept number.-->
<div class='box'>
<p>Enter Array Size:</p>
<input style="width: 50px;" type="number" value="100" id="etArraySize"/>
<input type="button" value="Create Array" id="btnCreateArray"/>
</div>
<div class='box'>
<p>Enter Location:</p>
<input type="number" value = "0" id="etArrayIndex"/>
<p>Enter Value to Insert:</p>
<input type="number" value="0" id="etArrayValue"/>
<input type="button" value="Insert Into Array" id="btnInsertValue"/>
</div>
<div class='box'>
<p>Enter Value to Find:</p>
<input type="number" value="0" id="etArrayFind"/>
<input type="button" value="Search Array" id="btnFindValue"/>
</div>
<!--It will display the operation count-->
<div class="box" id="counter">
</div>
</div>
</body>
<!--Simple yet beautiful style-->
<style>
.box{
padding: 2px 10px 10px;
background-color:#FAFAFA;
box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
border-radius: 2px;
margin:8px;
}
</style>
<script>
//Script started.
//global variable myArray.
var myArray;
//For count the number of operation when inserting,
var count=0;
//Reference all input element by their id to variable,
var etArraySize = document.getElementById("etArraySize");
var etArrayIndex = document.getElementById("etArrayIndex");
var etArrayValue = document.getElementById("etArrayValue");
var etArrayFind = document.getElementById("etArrayFind");
var btnCreateArray = document.getElementById("btnCreateArray");
var btnInsertValue = document.getElementById("btnInsertValue");
var btnFindValue = document.getElementById("btnFindValue");
var mStatus = document.getElementById("status");
//Adding click listener to all 3 buttons.
btnCreateArray.addEventListener("click",function(){
//If button create array click, create array of provided size in etArraySize.
createArray(etArraySize.value);
});
btnInsertValue.addEventListener("click",function () {
//Insert into array.
//parseInt will convert the text to integer.
//You may remove this, but this is good practise.
insertIntoArray(myArray,parseInt(etArrayIndex.value),parseInt(etArrayValue.value));
});
btnFindValue.addEventListener("click",function () {
//search the array.
SearchArray(myArray,parseInt(etArrayFind.value));
});
//create array function with a single param e means size of array.
function createArray(e){
//Convert the value in integer.
var val = parseInt(e);
//Initialize global myArray with given size.
myArray = Array(val);
//Loop through it's length.
for(var i=0;i<myArray.length;i++){
//Assign the random value which is between 1 <= x <= 100
myArray[i] = Math.floor(Math.random()*100)+1;
}
//Show the message at top of screen, where <p id="status"..... is defined.
showMessage("Array created of size " + val);
}
//Insert Array function.
function insertIntoArray(array,index,value) {
//First get the value which will replace by new value.
var oldValue = array[index];
//Now assign the new value to given index,
array[index] = value;
//You did new operation on array, count it by 1.
count++;
//Loop through array from its last index to given index + 2.
//because array[index] contains new value.
//array[index] + 1 contains the replace value, as it shift by one, (manually)
//and all other index also shift by one through loop.
for(var i=array.length-1; i>index+1;i--){
//shift value to upper index.
array[i] = array[i-1];
count++;
//Operation count ++.
}
//Check if the given index is not the last element.
if(index < array.length-1){
//After loop, put the replaceValue to arrayIndex[index+1]
array[index+1] = oldValue;
count++;
}
//Show the message at top.
showMessage("Added " + value + " at position " + index);
//Show the count at bottom.
showCount(count);
}
function SearchArray(array,value) {
//It will count the operation in SearchArray.
//If you want to count this operation with previous function,
//use count instead of searchCount.
var searchCount=0;
//to store the index, where the value is.
var foundIndex = -1;
//Loop through array and compare if the value exists at ith index or not.
for(var i=0;i<array.length;i++){
searchCount++;
//If yes, save the index, break the loop.
if(array[i] == value){
foundIndex = i;
break;
}
}
//Check if value is found or not.
//Display message according to operation.
if(foundIndex== -1){
showMessage("Element not found in array. Total Searched: " +searchCount);
}else{
showMessage("Element found at index: " + foundIndex + ", search count: " +searchCount);
showCount(searchCount);
}
}
function showMessage(e) {
//it will set the given message to mStatus, defined at top.
mStatus.innerHTML = e;
//You may remove setTimeOut function, it will just remove the message after
//5 second.
setTimeout(function () {
mStatus.innerHTML = "";
},5000);
}
//To display message at the bottom, change it according to your need.
function showCount(e) {
document.getElementById("counter").innerText = "Operation count on array: " + e;
e = 0;
}
</script>
</html>