Html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box" οnclick="panduan()"></div>
</body>
</html>
Css部分
* {
margin: 0;
padding: 0;
}
#box{
width: 30%;
height: 300px;
margin: 100px auto;
border: solid 1px #ccc;
text-align: center;
padding-top: 100px;
}
Js部分
function panduan() {
var box = document.getElementById('box');
// 定义一个空数组
var arr = [];
var brr = [];
// 通过循环把输入的数字存入数组中
for (var i = 0; i < 10; i++) {
arr[i] = parseInt(prompt("请输入" + (i + 1) + "个数：", ""));
}
// 数组复制：将输入数字的顺序保存
for(var x=0;x<arr.length;x++){
brr[x]=arr[x];
}
// 冒泡排序
for (var j = 0; j < arr.length - 1; j++) {
for (var k = 0; k < arr.length - j - 1; k++) {
if (arr[k] > arr[k + 1]) {
var temp = arr[k];
arr[k] = arr[k + 1];
arr[k + 1] = temp;
}
}
}
box.innerHTML = '原顺序：' + brr+'<br/>'+'冒泡排序，从小到大：' + arr;
}
