<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#ul{
margin: 5px;
list-style: none;
}
#ul li{
float: left;
width: 25px;
background: #aaa;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="content" autofocus placeholder="数字为 10-100" />
<button id="inset_left">左插入</button>
<button id="inset_right">右插入</button>
<button id="outset_left">左移除</button>
<button id="outset_right">右移除</button>
<button id="random_number">随机生成</button>
<button id="sort">排序</button>
<ul id="ul"></ul>
<script>
// 基于work4
function formatting(data){
var arr = '';
for (var i = 0; i <= data.length - 1; i++) {
arr += '<li style="height:' + data[i] + '"></li>';
}
document.getElementById('ul').innerHTML = arr;
document.getElementById('content').value = '';
// del();
}
// 加入
function inset(direction){
// 用 .children 选择中 ul 下的 li
var li = document.getElementById('ul').children;
// 判断li 队列数
if ( li.length > 60) {
alert('队列至多60个');
return false;
}
var text = document.getElementById('content').value;
// 判断
if ( isNaN(text) || text === '') {
alert('请输入数字');
return false;
} else if( text >= 100 || text <= 10){
alert('请输入10-100的数字');
return false;
}
// 保存高度
var highPx = text + 'px';
var ul = document.getElementById('ul').innerHTML;
if ( direction == 'left') {
ul = '<li style="height:'+ highPx +'">' + '</li>' + ul;
} else if( direction == 'right'){
ul = ul + '<li style="height:'+ highPx +'">' + '</li>';
}
console.log(ul);
document.getElementById('ul').innerHTML = ul;
// 添加一次后 清空value
// 这里用 text='' 的话不会清空value
// 应该用 document.get....
document.getElementById('content').value = '';
// 添加一次后光标定回去
document.getElementById('content').focus();
//
// formatting(data);
// del();
}
// 删除
function outset(direction){
// 用 .children 选择中 ul 下的 li
var li = document.getElementById('ul').children;
// 创建data 数组保存li
var data = [];
for (var i = 0; i < li.length ; i++) {
data[i] = li[i].style.height;
}
var move;
// 判断 左出 还 右出
if (direction == 'left') {
// shift() 删除数组第一个值，并返回
move = data.shift();
}else if (direction == 'right'){
// pop() 删除数组最后一个值，并返回
move = data.pop();
}
alert(move.slice(0,-2));
formatting(data);
}
function del(){
var del = document.getElementsByTagName('li');
for (var i = 0; i < del.length ; i++) {
del[i].addEventListener('click', function (){
this.parentNode.removeChild(this);
});
}
}
/*
随机生成
*/
function randomNum(times){
var li = document.getElementById('ul').children;
var random,
data = [];
if (isNaN(times) ) { return false; }
for (var i = 0; i < times; i++) {
data[i] = Math.ceil(Math.random() * 100) + 'px';
}
formatting(data);
}
function bubbleSort(){
var li = document.getElementById('ul').children;
var items = [];
var temp;
for (var i = 0; i < li.length; i++) {
items[i] = li[i].style.height.slice(0,-2);
console.log(items);
}
for (var j = 0; j < items.length; j++) {
for (var l = 0; l < items.length - j - 1; l++) {
if ( items[l] > items[l+1] ){
temp = items[l];
items[l] = items[l+1];
items[l+1] = temp;
}
}
}
// console.log(items);
// items 是去除了'px'的，应该要加回去
var data = [];
for (var k = 0; k < li.length; k++) {
data[k] = items[k]+'px';
}
formatting(data);
}
// function bubbleSort(){
// var li = document.getElementById('ul').children;
// var items = [];
// for (var i = 0; i < li.length; i++) {
// items[i] = li[i].style.height.slice(0,-2);
// }
// for (var j = 0; j < items.length; j++) {
// for (var l = 0; l < items.length - j; l++) {
// if ( items[l] > items[l+1] ){
// var temp = items[l];
// items[l] = items[l+1];
// items[l+1] = temp;
// }
// }
// }
// // items 是去除了'px'的，应该要加回去
// var data = [];
// for (var k = 0; k < li.length; k++) {
// data[k] = items[k]+'px';
// }
// formatting(data);
// }
(function (){
// 左入
var btnInsetLeft = document.getElementById('inset_left');
btnInsetLeft.addEventListener('click', function(){
inset('left');
del();
});
// 右入
var btnInsetRight = document.getElementById('inset_right');
btnInsetRight.addEventListener('click', function(){
inset('right');
del();
});
// 左出
var btnOutsetLeft = document.getElementById('outset_left');
btnOutsetLeft.addEventListener('click', function(){
outset('left');
del();
});
// 右出
var btnOutsetRight = document.getElementById('outset_right');
btnOutsetRight.addEventListener('click', function(){
outset('right');
del();
});
// 随机生成
var btnRandomNumber = document.getElementById('random_number');
btnRandomNumber.addEventListener('click', function(){
randomNum(20); // 次数
del();
});
// 排序
var btnSort = document.getElementById('sort');
btnSort.addEventListener('click',function(){
bubbleSort();
del();
});
})();
</script>
</body>
</html>我很奇怪，为什么我的bubbleSort 这个，他为什么先根据数字的第一位排序，然后再根据数字的第二位排序？？
如下图：
什么原因？
我自己另外测试了都没发现这现象
是因为我从样式里 slice(0,-2) 舍弃了px 后取得的数字的问题？？ 我是看不出来.... 很迷...
求指教
（要是我代码有什么问题的话...也可以提提... ）
================
今天早上看《javascript高级程序设计》的时候看到了 字符串排序 就是我这样的， 所以要将它转为数字才对。
如第一位回答者所说的用 parseInt 可以转换为整型值，然后就没问题了。
MDN中对parseInt的解释