任务目的
- 学习与实践JavaScript的基本语法、语言特性
- 练习使用JavaScript实现简单的排序算法
任务描述
- 基于上一任务
- 限制输入的数字在10-100
- 队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示
- 队列展现方式变化如图，直接用高度表示数字大小
- 实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料
任务注意事项
- 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 示例图仅为参考，不需要完全一致
- 具体算法及可视化的形式不做特别限制，只要求能够展现出算法的过程
- 建议不使用任何第三方库、框架
在线学习参考资料
基础JavaScript练习（二）总结
1、JavaScript parseInt() Function
parseInt()函数解析一个字符串并且返回一个整数。
基数参数被用于指定使用哪一个数字系统，例如基数为16表示字符串中的数字从十六进制数解析为十进制数。
如果省略了基数参数，JavaScript将假设成下述情况：
- ?如果字符串以“0x”开头，基数参数为16（十六进制）。
- ?如果字符串以其他开头，基数参数为10（十进制）。
注意：只有字符串中的第一个数字被返回。允许使用前导和尾随空格。
语法：
parseInt(string, radix)
string：将被解析的字符串。
Radix：可选，从2到36的数字，表示使用的数字系统。
返回值：数字。当第一个字符不能被转换为数字，返回NaN。
2、HTML DOM childNodes Property
childNodes属性返回一个节点的子节点集合，作为一个节点列表对象。在代码中节点集合已经被排序，并且可以通过下标访问，下标从0开始。这个属性为只读属性。
可使用节点列表对象的length属性来确定子节点的个数，然后可以循环所有的子节点并从中提取信息。
注意：元素当中的空白被认为时文本，文本也被认为是节点。注释同样被认为是节点。
childNodes属性与children属性区别：
children属性返回一个节点元素节点的集合，不包含文本和注释节点，childNodes属性包含。
语法：
element.childNodes
返回值：节点列表对象，代表节点的集合。在源代码中返回集合中的节点已被排序。
3、HTML DOM Style Object
Style对象代表一个独立的style语句。
访问一个Style对象
Style对象可以通过document的头部访问，也可以通过特定的HTML元素访问。
eg：var x = document.getElementsByTagName("STYLE");
var x = document.getElementById("myH1").style;
创建Style对象
可以使用document.createElement()方法创建一个<style>元素，也可以通过设置一个已经存在元素的style属性。
var x = document.createElement("STYLE");
document.getElementById("myH1").style.color = "red";
4、已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1