10_css-伪类选择器

本题考点：nth-child()

根据题目要求通过css修改ul元素标签下第二个和第四个li子元素标签的背景颜色，在css中可以通过伪类选择器:nth-child(n)匹配属于其父元素的第n个子元素，不论元素类型，n可以是数字、关键词、或公式。关键词odd和even是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

参考答案：

li:nth-child(even) {
	background-color: rgb(255, 0, 0);
}

或

li:nth-child(2) {
	background-color: rgb(255, 0, 0);
}
li:nth-child(4) {
	background-color: rgb(255, 0, 0);
}

12_css-按要求写一个圆

本题考点：border-radius

根据题目要求通过css完成一个半径为50px的圆，在css中通常将圆的直径设置为某个盒子的宽度和高度，再通过border-radius设置盒子四个边角的弧度。border-radius仅设置一个值时，可以同时给元素的四个边角统一设值。当使用px作为单位来表示圆角值的时候，可以理解为以某个px为半径的圆被紧贴靠在某个边角上所呈现的弧度。首先设置div元素标签的宽度、高度都为100px，border-radius为50px，此时四个圆角都是半径为50px圆的四分之一圆弧，合起来即为一个半径为50px的整圆。

参考答案：

div {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	border: 1px solid black;
}

22_js-阶乘

本题考点：阶乘、递归

根据题目要求实现一个阶乘函数，阶乘是所有小于及等于该数的正整数的积，并且0的阶乘为1。由于阶乘是递归函数的典型示例，所以通过递归的思想，如：number * fn(number -1)展开为number * (number-1) * (number-2)... * 1，可以快速实现某个正整数的阶乘计算，函数内部条件判断为：

• 当参数等于0时，返回1。

• 当参数不等于0时，返回当前值与fn(当前值 - 1)的积。

整个函数的终止条件为：当参数为0时。

参考答案：

function _factorial(number) {
	if(typeof number !== 'number') return
    if(number < 0) return
	if(number === 0) return 1
	return number * _factorial(number - 1)
}

方法二：

在函数体内实现一个循环，完成阶乘计算。

参考答案：

function _factorial(number) {
	if(typeof number !== 'number') return
	if(number < 0) return
	for(let i=number-1 ; i>0 ; i--) {
		number *= i
	}
	return number
}

26_js-数据类型转换

本题考点：隐式转换

根据题目要求，可以通过JavaScript隐式转换的特性，完成数字参数的拼接。在JavaScript中做加法运算，当遇到字符串值时，之后（包含当前字符串）的所有值都自动转换为字符串类型然后相加，结果为数值的链式拼接。

参考答案：

function _splice(left,right) {
	return '' + left + right
}

31_js-从大到小排序

本题考点：排序、sort()

根据题目要求，需要将数组中的数字进行排序，常见的数组排序方法有很多，这里主要考察JavaScript原生数组排序sort()方法。sort()方法是对数组中的项目进行排序，默认按照字母和升序将数组中字符串进行排序，所以默认的sort()方法无法满足题目中对数字进行排序的要求。但sort()方法可以选择接收一个方法，这个方法可以定义并替代默认排序的规则。sort()方法比较两个值时，将两个值发送给可选接收的函数，根据函数内部自定义的规则，返回值为负数时，对两个参数进行颠倒排序。

参考答案：

function _sort(array) {
	if(array instanceof Array) return array.sort((left,right) => right - left)
}

方法二：

快速排序是目前排序算法中最优的算法之一，思想简单，整个排序过程只需要三步：

1. 选择一个元素作为“基准（pivot）”
2. 所有小于“基准”的元素都移动到“基准”的左边，所有大于“基准”的元素都移动到“基准”的右边
3. 对“基准”左边和右边的两个子集，不断重复步骤一和步骤二，直到所有子集只剩下一个元素为止

参考答案：

function quickSort(array) {
　　if (array.length <= 1) return array
　　let pivotIndex = Math.floor(array.length / 2)
　　let pivot = array.splice(pivotIndex, 1)[0]
　　let left = []
　　let right = []
　　for (let i = 0; i < array.length; i++) {
　　　　if (array[i] < pivot) {
　　　　　　left.push(array[i])
　　　　} else {
　　　　　　right.push(array[i]);
　　　　}
　　}
　　return quickSort(left).concat([pivot], quickSort(right))
}

49_webAPI-动态创建节点

本题考点：querySelector()

根据题目要求，创建li标签元素并且添加到ul标签元素内，核心步骤有四：

1. 获取ul标签元素
2. 创建li标签元素
3. 设置li标签元素内容
4. 将li标签元素插入到ul标签元素内

在JavaScript中获取页面某个元素的方法有很多，根据题目内容选择document.querySelector()方法是最优的，它可以获取当前页面首个目标标签元素。接下来通过循环遍历数组，并且在每一个循环体中通过document.createElement()方法创建li标签，再通过innerHTML或innerText设置li标签内容，最后通过appendChild()方法将li添加在ul中。

参考答案：

function createLi(array) {
    var ul = document.querySelector('ul')
    for(let i=0 ; i<array.length ; i++) {
        let li = document.createElement('li')
        li.innerHTML = array[i]
        ul.appendChild(li)
    }
}

51_webAPI-修改元素内容

本题考点：getElementsByClassName()

根据题目要求，修改类名为“box”的div标签元素内容，核心步骤有二：

1. 获取到div标签元素
2. 修改div标签元素内容

在JavaScript中，获取一个标签元素的方法有很多，本题可以通过document.querySelector()获取页面中首个div标签元素，也可以通过document.getElementsByClassName()获取div标签元素。注意：document.getElementsByClassName()可以获取当前页面所有目标类名的元素标签，仅需选取首个([0])数组元素即可。再通过innerHTML或innerText修改该标签元素内容。

参考答案：

function modifyText() {
    document.getElementsByClassName('box')[0].innerHTML = '欢迎来到牛客网'
}

55_综合-关闭按钮隐藏元素

本题考点：定位、样式、元素获取

根据题目要求，分析出本题核心步骤有五：

1. 设置类名为“box”的div标签元素定位为相对定位
2. 设置类名为“btn”的div标签元素定位为绝对定位
3. 计算类名为“btn”的div标签元素中心定位在类名为“box”的div标签元素右上顶点的坐标
4. 设置类名为“btn”的div标签元素内容居中且行高等于该标签的高度
5. 在类名为“btn”的div标签元素点击事件中，设置类名为“box”的div标签元素“display”属性为“none”

首先设置类名为"box"的div标签元素定位属性为相对定位，这是为了保证类名为“btn”的div标签元素绝对定位有效。然后设置类名为“btn”的div标签元素定位属性为绝对定位以完成位置的固定，同时根据该元素的宽度和高度计算出定位坐标top：-10px、right：-10px，还要设置该元素的水平居中属性和行高属性为该元素的高度，以保证字体可以垂直居中在该元素中。最后在类名为“btn”的div标签元素点击事件中设置类名为"box"的div标签元素“style”属性中的“display”属性为"none"即可。

参考答案：

.box {
    width: 100px;
    height: 100px;
    border: solid 1px black;
    position: relative;
}
.btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 20px;
    background-color: red;
}

btn.onclick = function() {
     document.getElementsByClassName('box')[0].style.display = 'none'
}