nk前端篇-零基础FED
- HTML
- CSS
- ES5
- 数据类型
- 运算符
- 流程控制
- 内置对象
- 29 **从大到小排序**
- 30 **大写字符串**
- 31 **对象属性键名**
- 32 **对象数字**
- 33 **对象字符串**
- 34 **去除字符串两端空格**
- 35 **输出日期**
- 36 **数字取整**
- 37 **数组反转**
- 38 **数组转字符串**
- 39 **数组最大值**
- 40 **搜索数字**
- 41 **头部插入元素**
- 42 **尾部插入元素**
- 43 **js-位置查找**
- 44 **向下取整**
- 45 **整数反转**
- 46 **字符串搜索**
- 57 **移除数组中的元素**
- 58 **移除数组中的元素**
- 59 **添加元素**
- 60 **删除数组最后一个元素**
- 61 **添加元素**
- 62 **删除数组第一个元素**
- 63 **数组合并**
- 64 **添加元素**
- 65 **求二次方**
- 66 **查找元素位置**
- 67 **避免全局变量**
- 68 **正确的使用 parseInt**
- 函数
- this
- WebAPI
- 操作地址栏
- 综合练习
- 总结
- 更多
HTML
基本标签
1 表单类型
请依次写出以下类型的输入框。
- 类型为密码，默认值为"nowcoder"
- 类型为复选框，且状态为已勾选
<form>
<input type = "password" value = "nowcoder">
<input type = "checkbox" checked = "checked">
</form>
2 表格结构
请写出具有表格标题为"nowcoder"的2行3列表格结构。
<table>
<caption>nowcoder</caption>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</table>
3 图像标签属性
请写出具有标题属性和代替文本属性的图片标签。
<img src="" title="图片" alt="图片">
4 新窗口打开文档
请写出可以在新窗口打开文档的a标签。
<a href="#" target="_blank"></a>
5 自定义列表
请写出列表项为"nowcoder"且列表项内容也为"nowcoder"的自定义列表。
<dl>
<dt>nowcoder</dt>
<dd>nowcoder</dd>
</dl>
73 加粗文字
使用一个标签将“牛客网”三个字加粗显示
<strong>牛客网</strong>
<p><strong>牛客网</strong>,程序员必备求职神器</p>
语义化标签
6 语义化标签
请使用语义化标签创建头部标签且包含导航标签。
注意：只需在html模块填写标签结构，有且仅有一个头部标签和一个导航标签。
<header>
<nav></nav>
</header>
媒体标签
7 音频媒体标签属性
请写出具有控件功能的音频媒体标签。
<audio src="#" autoplay loop controls/>
8 视频媒体标签属性
请写出具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。
<video src="#" autoplay controls onerror="function()"/>
CSS
选择器
9 CSS选择器——标签、类、ID选择器
请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，“绿色"设置为"rgb(0, 128, 0)”，“黑色"设置为"rgb(0, 0, 0)”，且字体大小都为20px。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div{
font-size : 20px;
color : rgb(255, 0, 0);
}
.green{
color : rgb(0, 128, 0);
}
#black{
color : rgb(0, 0, 0);
}
</style>
</head>
<body>
<div>红色</div>
<div class='green'>绿色</div>
<div id='black'>黑色</div>
</body>
</html>
10 CSS选择器——伪类选择器
请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
li:nth-child(2n){
background-color:rgb(255,0,0)
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
或//odd奇数；even:偶数
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);
}
11 CSS选择器——伪元素
请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。
div::after{
content:"";
width:20px;
height:20px;
background-color:rgb(255, 0, 0);
display:block;
}
样式设置
12 按要求写一个圆
请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
\1. 圆角属性仅设置一个值
\2. 圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。
div{
width:100px;
height:100px;
border:1px black solid;
border-radius:50px;
}
13 设置盒子宽高
请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。
.box{
width:100px;
height:100px;
padding:20px;
margin:10px;
border:1px black solid;
}
74 段落标识
请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”
<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>
75 设置文字颜色
请使用嵌入样式将所有p标签设置为红色文字
<style>
p{
color:red
}
</style>
<p>欢迎来到牛客网</p>
<p>在这里，我们为你提供了IT名企的笔试面试题库</p>
<p>在这里，我们以题会友</p>
76 圣诞树
圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：
1. "topbranch"是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
2. "middleBranch"是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
3. "base"是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。
注意：
1. 上枝叶、树干的居中都是通过左外边距实现的
2. 没有显示的边框，其属性都是透明（属性）
3. 仅通过border属性完成边框的所有属性设置
效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.topbranch {
width: 0px;
height: 0px;
/*
* TODO: 上枝叶效果
*/
float:left;
border-top:100px solid transparent;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid green;
margin-left:100px;
}
.middleBranch {
width: 0px;
height: 0px;
/*
* TODO: 中枝叶效果
*/
border-top:200px solid transparent;
border-left:200px solid transparent;
border-right:200px solid transparent;
border-bottom:200px solid green;
}
.base {
/*
* TODO: 树干效果
*/
width:70px;
height:200px;
background-color:gray;
float:left;
margin-left:165px;
}
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>
布局
14 浮动和清除浮动
请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
/*补全代码*/
clear:both;
height:100px;
border:1px solid black;
}
.left {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
display:inline-block;
border:1px solid black;
}
.right {
width: 100px;
height: 100px;
/*补全代码*/
float:left;
display:inline-block;
border:1px solid black;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
15 固定定位
请将html模块类为"box"的div元素固定在视口的左上角。
.box {
width: 100px;
height: 100px;
/*补全代码*/
position:fixed;
top:0px;
left:0px;
}
16 绝对定位
请将html模块类为"btn"的div元素中心定位在类为"wrap"的父级div元素右上顶点处。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.wrap {
width: 100px;
height: 100px;
border: solid 1px black;
/*补全代码*/
position:relative;
}
.btn {
width: 20px;
height: 20px;
text-align: center;
background-color: red;
/*补全代码*/
position:absolute;
right:-10px;
top:-10px;
}
</style>
</head>
<body>
<div class='wrap'>
<div class='btn'>X</div>
</div>
</body>
</html>
17 行内元素垂直水平居中
请将html模块中p元素的内容设置为垂直水平居中。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
p {
width: 800px;
height: 40px;
border: solid 1px black;
/*补全代码*/
line-height:40px;
text-align:center;
}
</style>
</head>
<body>
<p>牛客网，是一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站。</p>
</body>
</html>
单位
18 CSS单位（一）
请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
/*补全代码*/
font-size:16px;
height:4em;
width:4em;
border:1px solid black;
}
</style>
</head>
<body>
<div class='box'>盒子宽高是文字大小的四倍</div>
</body>
</html>
19 CSS单位（二）
请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意：只需在css模块补全样式内容，请勿修改html模块。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
div {
/*补全代码*/
width:4rem;
height:4rem;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ES5
数据类型
20 基本数据类型检测
请补全JavaScript函数，要求以字符串的形式返回参数的类型。
注意：只需检测基本数据类型。
function _typeof(value) {
// 补全代码
return typeof(value) + ''
}
21 检测复杂数据类型
请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。
// 在JS中，判断一个变量的类型，常常会用到typeof运算符，但当用来判断引用类型变量时，无论是什么类型的变量，它都会返回Object。为此，引入了instanceof。
instanceof相比与typeof来说，instanceof方法要求开发者明确的确认对象为某特定类型。即instanceof用于判断引用类型属于哪个构造函数的方法
原文链接：https://blog.csdn.net/lunahaijiao/article/details/84974355
function _instanceof(left,right) {
// 补全代码
return left instanceof right;
}
22 数据类型转换
请补全JavaScript函数，要求以字符串的形式返回两个数字参数的拼接结果。
示例：
\1. _splice(223,233) -> “223233”
\2. _splice(-223,-233) -> “-223-233”
function _splice(left,right) {
// 补全代码
return String(left) + String(right)
}
function _splice(left,right) {
return left.toString() + right.toString()
}
运算符
23 阶乘
请补全JavaScript函数，要求返回数字参数的阶乘。
注意：参数为大于等于0的整数。
function _factorial(number) {
// 补全代码
if(number == 1) return 1
let num = 1
for(let i = 1;i <= number;i++){
num *= i
}
return num
}
function _factorial(number) {
// 补全代码
if(number == 1) return 1
return number * _factorial(number - 1)
}
24 绝对值
请补全JavaScript函数，要求返回数字参数的绝对值。
function _abs(number) {
// 补全代码
return number > 0 ? number : -number
}
function _abs(number) {
// 补全代码
return Math.abs(number)
}
25 幂
请补全JavaScript函数，要求返回底数为第一个参数，幂为第二个参数的数值。
function _pow(number,power) {
// 补全代码
return Math.pow(number,power)
}
function _pow(number,power) {
// 补全代码
if(power === 0) return 1
let num = 1
for(power;power > 0;power--){
num *= number
}
return num
}
26 平方根
请补全JavaScript函数，要求返回数字参数的平方根。
function _sqrt(number) {
// 补全代码
return Math.sqrt(number)
}
function _sqrt(number) {
// 补全代码
let left = 1,right = number
while(left < right){
let mid = (left + right) >> 1
if(mid * mid == number) return mid
else if(mid * mid < number) left = mid + 1
else right = mid - 1
}
}//右移一位相当于除2，右移n位相当于除以2的n次方。
27 余数
请补全JavaScript函数，要求返回数字参数除以2的余数。
function _remainder(value) {
// 补全代码
return value % 2
}
// 法1：return value%2
// 法2：return value - (value>>1)*2
// 法3：
while(value > 2){
value >>= 1;
}
return value;
56 数组求和
计算并返回给定数组 arr 中所有元素的总和
function sum(arr) {
let num = 0
for(let i = 0;i < arr.length;i++){
num += arr[i]
}
return num
}
69 完全等同
判断 val1 和 val2 是否完全等同
function identity(val1, val2) {
return val1 === val2
}
70 或运算
返回参数 a 和 b 的逻辑或运算结果
function or(a, b) {
return a || b
}
71 且运算
返回参数 a 和 b 的逻辑且运算结果
function and(a, b) {
return a && b
}
72
描述
统计字符串中每个字符的出现频率，返回一个 Object，key 为统计字符，value 为出现频率
\1. 不限制 key 的顺序
\2. 输入的字符串参数不会为空
\3. 忽略空白字符
示例1
输入：‘hello world’
输出：{h: 1, e: 1, l: 3, o: 2, w: 1, r: 1, d: 1}
function count(str) {
let obj = {}
for(let i = 0;i < str.length;i++){
if(str[i] != ''){
let num = str[i]
if(obj[num] != undefined){
obj[num] += 1
}else{
obj[num] = 1
}
}
}
return obj
}
流程控制
28 返回星期数
请补全JavaScript函数，要求以字符串的形式返回数字参数所对应的星期。
示例：
\1. _getday(1) -> “星期一”
\2. _getday(7) -> “星期天”
function _getday(value) {
// 补全代码
let res = ['','星期一','星期二','星期三','星期四','星期五','星期六','星期天']
return res[value]
}
内置对象
29 从大到小排序
请补全JavaScript函数，要求将数组参数中的数字从大到小进行排序并返回。
function _sort(array) {
return array.sort(function(a,b){return b - a})
}
30 大写字符串
请补全JavaScript函数，要求将字符串参数转换为大写字符串并返回。
function _touppercase(string) {
return string.toUpperCase()
}
31 对象属性键名
请补全JavaScript函数，要求以数组的形式输出对象各个属性的键名。
示例：
\1. _keys({name:‘nowcoder’,age:7}) -> [‘name’,‘age’]
注意：只需考虑对象属性均为原始数据类型的情况。
function _keys(object) {
// 补全代码
return Object.keys(object)
}
32 对象数字
请补全JavaScript函数，要求将数字参数转换为对象的形式返回。
示例：
\1. typeof number === ‘number’ -> typeof _numbertoobject(number) === ‘object’
function _numbertoobject(number) {
return {number} //返回一个number对象 {number：number}
}
33 对象字符串
请补全JavaScript函数，要求将字符串参数转换为对象的形式返回。
function _stringtoobject(string) {
return {string}
}
34 去除字符串两端空格
请补全JavaScript函数，要求去除参数字符串两端的空格并返回。
function _trim(string) {
return string.trim() //截取中间的非空白字符,返回一个字符串，其值为此字符串，并删除任何前导和尾随空格。
}
35 输出日期
请补全JavaScript函数，要求以字符串的形式输出时间戳参数所对应的"年-月-日"。
示例：
\1. _date(1631159776311) -> ‘2021-9-9’
function _date(number) {
// 补全代码
let date = new Date(number)
return date.getFullYear() + '-' + (date.getMonth() + 1) + "-" + date.getDate()
}
36 数字取整
请补全JavaScript函数，要求返回数字参数的整数部分。
function _int(value) {
//方法1
return parseInt(value)
//方法2
return Math.floor(value)
//方法3
return Number(String(value).split('.')[0])
}
37 数组反转
请补全JavaScript函数，要求将参数数组反转之后返回。
function _reverse(array) {
// 补全代码
//1.
//return array.reverse()
//2.
let left = 0,right = array.length - 1
while(left < right){
[array[left],array[right]] = [array[right],array[left]]
left++
right--
}
return array
}
38 数组转字符串
请补全JavaScript函数，要求将参数数组转换为字符串输出。
示例：
\1. _join([1,‘2’,3]) -> “123”
注意：只需考虑一维数组且数据类型为原始数据类型。
function _join(array) {
return array.join('')
}
39 数组最大值
请补全JavaScript函数，要求找到数组参数中的最大值并返回。
注意：数组中只包含数字。
function _max(array) {
//return Math.max(...array)
var max = array[0]
for(let i = 1;i < array.length;i++){
if(array[i] > max){
max = array[i]
}
}
return max
}
40 搜索数字
请补全JavaScript函数，要求以boolean的形式返回字符串参数中是否包含数字。
function _search(string) {
var n = string.search(/\d/);
if(n == -1){
return false;
}else{
return true;
}
}
function _search(string) {
for(let i of string){
if(isNaN(i) === false){ //isNaN判断该常量是否为数字，如果是数字，返回false，如果不是，则返回true；
return true
}
}
}
41 头部插入元素
请补全JavaScript函数，要求将第二个参数插入第一个参数数组的头部，并且以数组的形式返回。
function _unshift(array,value) {
//1.
//return array.unshift(value)
//2.
for(let i = array.length;i > 0;i--){
array[i] = array[i - 1]
}
array[0] = value
return array
}
42 尾部插入元素
请补全JavaScript函数，要求将第二个参数插入第一个参数数组的尾部，并且以数组的形式返回。
function _push(array,value) {
array.push(value)
return array
}
43 js-位置查找
请补全JavaScript函数，要求以数字的形式返回第一个参数数组中第二个参数所在的首个索引值。
注意：如果数组中不存在目标值，则返回-1。
function _indexof(array,value) {
return array.indexOf(value)
}
function _indexof(array,value) {
for(let i = 0;i < array.length;i++){
if(array[i] === value){
return i
}
}
return -1
}
44 向下取整
请补全JavaScript函数，要求以数字的形式返回数字参数向下取整的结果。
function _floor(number) {
return Math.floor(number)
}
45 整数反转
请补全JavaScript函数，要求将整数参数反转之后输出。
示例：
\1. _reverse(0) -> 0
\2. _reverse(233) -> 332
\3. _reverse(-223) -> -322
function _reverse(number) {
return parseInt(String(number).split('').reverse().join(''))
}
46 字符串搜索
请补全JavaScript函数，要求以boolean的形式返回字符串首参中是否包含第二个参数。
function _search(string,value) {
//1.
return string.includes(value)
//2.
//return string.indexOf(value) === -1 ? false : true
}
57 移除数组中的元素
移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组
function remove(arr, item) {
let res = []
for(let i = 0;i < arr.length;i++){
if(arr[i] !== item){
res.push(arr[i])
}
}
return res
}
58 移除数组中的元素
描述
移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果数组返回
示例1
输入：[1, 2, 2, 3, 4, 2, 2], 2
输出：[1, 3, 4]
function removeWithoutCopy(arr, item) {
for(let i = 0;i < arr.length;i++){
if(arr[i] == item){
arr.splice(i,1)
i--
}
}
return arr
}
59 添加元素
描述
在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组
示例
输入：[1, 2, 3, 4], 10
输出：[1, 2, 3, 4, 10]
function append(arr, item) {
//1.
return [...arr,item]
//2.
let res = []
for(let i = 0;i < arr.length;i++){
res[i] = arr[i]
}
res.push(item)
return res
}
60 删除数组最后一个元素
描述
删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组
示例1
输入：[1, 2, 3, 4]
输出：[1, 2, 3]
function truncate(arr) {
let res = []
for(let i = 0;i < arr.length - 1;i++){
res.push(arr[i])
}
return res
}
61 添加元素
描述
在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组
示例1
输入：[1, 2, 3, 4], 10
输出：[10, 1, 2, 3, 4]
function prepend(arr, item) {
let res = []
res.push(item)
for(i = 0;i < arr.length;i++){
res.push(arr[i])
}
return res
}
62 删除数组第一个元素
删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组
function curtail(arr) {
let res = []
for(let i = 1;i < arr.length;i++){
res.push(arr[i])
}
return res
}
63 数组合并
合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组
function concat(arr1, arr2) {
let res = []
for(let i = 0;i < arr1.length;i++){
res.push(arr1[i])
}
for(let i = 0;i < arr2.length;i++){
res.push(arr2[i])
}
return res
}
64 添加元素
描述
在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组
示例1
输入：[1, 2, 3, 4], ‘z’, 2
输出：[1, 2, ‘z’, 3, 4]
function insert(arr, item, index) {
let res = []
for(let i = 0;i < arr.length;i++){
if(i == index){
res.push(item)
}
res.push(arr[i])
}
return res
}
65 求二次方
描述
为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组
示例1
输入：[1, 2, 3, 4]
输出：[1, 4, 9, 16]
function square(arr) {
let res = []
for(let i = 0;i < arr.length;i++){
res.push(arr[i] * arr[i])
}
return res
}
66 查找元素位置
描述
在数组 arr 中，查找值与 item 相等的元素出现的所有位置
示例1
输入：[‘a’,‘b’,‘c’,‘d’,‘e’,‘f’,‘a’,‘b’,‘c’] ‘a’
输出：[0, 6]
function findAllOccurrences(arr, target) {
let res = []
for(let i = 0;i < arr.length;i++){
if(arr[i] === target){
res.push(i)
}
}
return res
}
67 避免全局变量
给定的 js 代码中存在全局变量，请修复
function globals() {
let myObject = { //如果不使用var/let而直接声明变量，则该变量为全局变量。
name : 'Jory'
};
return myObject;
}
68 正确的使用 parseInt
描述
修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例
示例1
输入：‘12’
输出：12
示例2
输入：‘12px’
输出：12
示例3
输入：‘0x12’
输出：0
function parse2Int(num) {
return parseInt(num,10); 按10进制去处理字符串，碰到非数字字符，会将后面的全部无视
}
函数
47 函数——参数对象
请补全JavaScript函数，要求返回它的参数伪数组对象。
function getArguments (a,b,c) {
return arguments
//return [...arguments]
}
我们使用arguments调用参数可以不混淆不同函数之间的参数名。另外为了装逼（代码的严整度），我们也能用arguments来判断当前传入参数的个数是否与我们需要的数量一致。
function add() {
if( arguments.length == 2 ){
return arguments[0] + arguments[1];
}else{
return '传入参数不合法';
}
}
console.log( add(2,3) );
console.log( add(1,2,3) );
arguments还有一个叫做callee的属性，这个属性是表示的是当前函数的一个引用，简单点说，这个属性里面存储的我们调用的这个函数的代码
arguments的一些妙用
1.利用arguments实现方法的重载
下面我们利用arguments对象来实现一个参数相加的函数，不论传入多少参数都行，将传入的参数相加后返回。
function add() {
var len = arguments.length,
sum = 0;
for(;len--;){
sum += arguments[len];
}
return sum;
}
console.log( add(1,2,3) ); //6
console.log( add(1,3) ); //4
console.log( add(1,2,3,5,6,2,7) ); //26
由于js是一种弱类型的语言，没有重载机制，当我们重写函数时，会将原来的函数直接覆盖，这里我们能利用arguments，来判断传入的实参类型与数量进行不同的操作，然后返回不同的数值。
2.利用arguments.callee实现递归
先来看看之前我们是怎么实现递归的，这是一个结算阶乘的函数
function factorial(num) {
if(num<=1) {
return 1;
}else {
return num * factorial(num-1);
}
}
但是当这个函数变成了一个匿名函数时，我们就可以利用callee来递归这个函数。
function factorial(num) {
if(num<=1) {
return 1;
}else {
return num * arguments.callee(num-1);
}
}
这个方法虽然好用，但是有一点值得注意，ECMAScript4中为了限制js的灵活度，让js变得严格，新增了严格模式，在严格模式中我们被禁止不使用var来直接声明一个全局变量，当然这不是重点，重点是arguments.callee这个属性也被禁止了。不过这都不是事儿，ES6为我们新增了很多好用的变量声明方式和新的语法糖，作为一个时髦的前端，我们赶紧学习一些ES6的新语法吧。
————————————————
原文链接：https://blog.csdn.net/qq_16339527/article/details/53231725
this
48 this指向
请补全JavaScript函数，使obj对象中fn函数返回该对象中a属性和b属性的和。
var obj = {
a: 1,
b: 2,
fn: function(){
// 补全代码
return this.a + this.b
}
}
WebAPI
元素操作
49 JS动态创建节点
请补全JavaScript函数，根据参数数组创建li元素。
要求：
\1. li元素的个数和数组的长度一样
\2. li元素的内容是数组中的每个元素
\3. 将创建的所有li元素插入到ul中
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul></ul>
</body>
<script type="text/javascript">
function createLi(array){
// 补全代码
let ul = document.querySelector('ul');
for(let i = 0;i < array.length;i++){
let lis = document.createElement('li');
lis.innerHTML = array[i];
ul.appendChild(lis);
}
}
</script>
</html>
50 根据ID获取元素
请补全JavaScript函数，根据id获取html模块中ul标签下第二个li元素并返回。
function getLI(id){
return document.getElementById(id)
}
51 JS修改元素内容
请补全JavaScript函数，将类为"box"的div元素内容修改为"欢迎来到牛客网"。
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<div class='box'></div>
</body>
<script type="text/javascript">
function modifyText(){
// 补全代码
document.querySelector('.box').innerText = '欢迎来到牛客网'
}
</script>
</html>
绑定事件
52 阻止冒泡事件
请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。
注意：需要自行获取li元素。
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul>
<li>nowcoder</li>
</ul>
</body>
<script type="text/javascript">
// 补全代码
let li = document.getElementsByTagName('li')[0]
li.onclick = function(e){
e.stopPropagation()
}
</script>
</html>
53 阻止默认事件
请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。
注意：需要自行获取input元素。
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<form>
<label>牛客会陪伴大家</label>
<input id="checkbox" type="checkbox" checked />
</form>
</body>
<script type="text/javascript">
// 补全代码
//1.
let inp = document.querySelector('input');
inp.addEventListener('click', function (e) {
e.preventDefault()
})
//2.
let chbox = document.getElementById('checkbox');
chbox.onclick = (e) => e.preventDefault()
</script>
</html>
操作地址栏
54 url地址
请补全JavaScript函数，实现一个函数返回页面当前url。
function getUrlHref (){
return window.location.href
}
window.location 对象可不带 window 前缀书写。
一些例子：
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档
综合练习
55 点击按钮隐藏元素
请补全JavaScript代码，实现一个盒子的关闭按钮功能。
要求：
\1. 使类为"btn"的div元素中心点定位在类为"box"的div元素右上顶点
\2. 使类为"btn"的div元素中内容"X"垂直水平居中
\3. 点击"X"按钮可以使类为"box"的div元素隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: solid 1px black;
/*补全代码*/
position: relative;
}
.btn{
width: 20px;
height: 20px;
background-color: red;
/*补全代码*/
position: absolute;
top: -10px;
right: -10px;
line-height:20px;
text-align: center;
}
</style>
</head>
<body>
<div class='box'>
<div class='btn'>X</div>
</div>
<script type="text/javascript">
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
btn.onclick = function(){
// 补全代码
box.style.display = 'none'
}
</script>
</body>
</html>
总结
这里对文章进行总结：
以上就是nk前端篇-零基础的内容，本文仅仅简单介绍了常用标签与函数的使用，在此记录，而更多关于前端题目会后续继续整理。
更多
【前端】nk前端篇-零基础FED
【前端】nk前端篇-CSS布局CSS
【前端】nk前端篇-JS能力测评js(1)
【前端】nk前端篇-JS能力测评js(2)
8747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
