考试题
This commit is contained in:
parent
9bf8e8d020
commit
71190d870d
BIN
csspress/float.assets/image-20210325154909010.png
Normal file
BIN
csspress/float.assets/image-20210325154909010.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
csspress/float.assets/image-20210325162113569.png
Normal file
BIN
csspress/float.assets/image-20210325162113569.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
@ -66,6 +66,14 @@
|
||||
|
||||
这时候如果把x去掉 那么父元素（蓝色框） 就直接没了
|
||||
|
||||
## 探究float实现文字环绕：
|
||||
css设计师在设计float属性的时候定义了float 两个特性：
|
||||
* “破坏文档流”，使父元素高度塌陷
|
||||
* 禁止行框盒子与浮动元素进行重叠
|
||||
|
||||
所以在文字环绕图片的过程中 第一步破坏文档流使父元素高度塌陷 这时候文字标签跟图片在一个水平线上。然而还没有出现环绕的效果 这时候 第二个特征也就是float元素禁止与行框盒子发生重叠（有人认为这是float与绝对定位最大的区别之一）
|
||||
|
||||
|
||||
|
||||
|
||||
## float 使用
|
||||
@ -252,3 +260,120 @@ css:
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 其他内容
|
||||
|
||||
<div style="width: 200px;text-align: justify;background: yellow">
|
||||
<span>这里有很多文字，且要超出一行且要超出一行且要超出一行</span>
|
||||
<span style="float: right;color:blue">更多</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div style="width: 200px;text-align: justify;background: yellow">
|
||||
<span style="float: right;color:blue">更多</span>
|
||||
<span>这里有很多文字，且要超出一行且要超出一行且要超出一行</span>
|
||||
</div>
|
||||
|
||||
浮动元素参考的是离他最近的行框盒子
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
下面这段代码 有什么效果？为什么
|
||||
|
||||
```
|
||||
<div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px;clear:left">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px;clear:left">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:gold;float:left;margin-left:20px;margin-top:10px">1</div>
|
||||
<div style="width:40px;height:40px;background:red;margin-left:20px;margin-top:10px">1</div>
|
||||
<p>
|
||||
hoho
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
效果如上面的实例所示，会将里面的小方块分成两行
|
||||
|
||||
原因：在行内样式中，第三个元素被赋予clear:left (清除左浮动)，这个时候根据标准 他不能跟前面浮动的元素相邻，也就是不能跟前面的元素做朋友了 要分开去下一行 只能换行咯
|
||||
|
||||
但是标准没有规定不能跟下一个元素做朋友，所以后面的元素依然可以依据左浮动的规则继续靠在一起.
|
||||
|
||||
因为第一行和第二行都保持了浮动的特性，所以父级元素的高度是0，再最后面插入文本的时候，会飘到第一行去,如果是文字的话因为浮动元素不能和行框元素发生重叠，所以文字会出现在最右侧 而且最后定义的盒子里面的字会跟盒子本体分离
|
||||
|
||||
因为盒子占了空间所以hoho被挤到下一行的右边去了
|
||||
|
||||
|
||||
看完了上面的例子，再来简单了解下clear的四个属性，分别是none(默认，就是没有)，left（清左浮动），right（清右浮动）以及我们最常用的both(全清)。作者这里给出了clear的基本使用方式就是clear:both。left和right属性根本没有软用，让CSS自己判断就好了，因为不可能有一个元素既是left又是right浮动的，因此无需考虑是清左浮动还是右浮动，全清就完事了。
|
||||
|
||||
|
||||
由于clear只能确保和前面的元素发生关系，因此我们最常使用的是after伪类清浮动，而不是before，因为before生成的元素根本没法和后面的元素交流clear的事情。最后我们放上我们最喜欢使用的after伪类清浮动的方法，注意clear属性只有块级元素才有效，而伪类的默认属性是内联值，不要忘了display:block声明。
|
||||
|
||||
|
||||
## 通过BFC 彻底清除浮动
|
||||
BFC是block formatting context的缩写，中文名为“块级格式化上下文”。前面也多次提到了这个听起来十分拗口的属性，那么CSS设计这个属性的初衷是什么呢？
|
||||
|
||||
|
||||
记住一句话：拥有BFC特性的元素会形成类似“结界”的封闭内部空间，该元素内部的元素以及该元素本身都不会影响外部元素的表现。要理解这句话，还得通过一些例子来证明，在举例证明之前，我们必须得知道一件事，就是CSS规定了哪些属性可以生成BFC属性，常见的情况如下：
|
||||
|
||||
* flaot 不为none的元素
|
||||
* overflow为 auto scroll 或hideen 的元素
|
||||
* display的值为inline-block，table-cell或table-caption的元素
|
||||
* position的值不为relative和static
|
||||
|
||||
<div display="inline-block">
|
||||
<div style="float: left;">我的父元素有BFC,我是左浮动</div>
|
||||
<div style="float: right;">我的父元素有BFC,我是右浮动</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<div style="float: left;">我的父元素有BFC,我是左浮动</div>
|
||||
<div style="float: right;">我的父元素有BFC,我是右浮动</div>
|
||||
</div>
|
||||
45
demos/html/html基本结构.md
Normal file
45
demos/html/html基本结构.md
Normal file
@ -0,0 +1,45 @@
|
||||
# html基本结构
|
||||
|
||||
* demo1
|
||||
```
|
||||
<!doctype html> <!--文档声明--> (<!--这是注释的内容-->)
|
||||
<html>
|
||||
<head>
|
||||
<title>这是html基本结构</title> <!--这是浏览器标签栏上的标题 -->
|
||||
</head>
|
||||
<body>
|
||||
...页面内容
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
* demo2
|
||||
```
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>这是html基本结构</title>
|
||||
<meta charset="UTF-8"> <!-- 解决乱码 -->
|
||||
</head>
|
||||
<body>
|
||||
...页面内容
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
* demo3
|
||||
```
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>这是html基本结构</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
...页面内容
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
76
teaching/jwl/课件/js/duixiang.html
Normal file
76
teaching/jwl/课件/js/duixiang.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script>
|
||||
// 方法一： 用字面量创建单个对象
|
||||
var obj={name:"cony"}
|
||||
// 方法二：用构造函数创建单个对象
|
||||
function createobjgc(name){
|
||||
this.name=name
|
||||
this.say=function (){
|
||||
console.log("hello"+name)
|
||||
}
|
||||
}
|
||||
var obj3=new createobjgc("cony")
|
||||
var obj4=new createobjgc("ling")
|
||||
console.log(obj3.say==obj4.say) //false
|
||||
|
||||
// console.log(obj2) //{name:cony}
|
||||
// 详解构造函数
|
||||
// 1.构造函数唯一区别就在于调用他们的方式不同。任何函数只要通过new关键字调用 那他就可以作为构造函数
|
||||
// 如果构造函数不通过new调用 那这个函数跟普通函数也没有任何区别
|
||||
// 2.构造函数的问题，实例中的每个方法都要在每个实例上重新创建一遍.
|
||||
// 上面的构造函数可以写成下面的形式
|
||||
// function createobj(name){
|
||||
// this.name=name
|
||||
// this.say=new Function ( `console.log("hello"+${name})`)
|
||||
|
||||
// }
|
||||
// 也就是上面的obj3和obj4都有say()方法，但两个say()方法 并不是同一个Function的实例 (ECMAScript中的函数是对象，所以说没实例化一遍就会实例化一个function对象)
|
||||
// 所以说虽然创建的机制一样，但是他们不在同一个作用域链上了所以obj1.say== obj2.say =》false
|
||||
|
||||
// 为了解决这个问题，可以通过下面的方式定义
|
||||
function createobj0(name){
|
||||
this.name=name
|
||||
this.say=say
|
||||
}
|
||||
var say=function(){
|
||||
console.log("hello"+this.name)
|
||||
}
|
||||
var obj3=new createobj0("cony")
|
||||
var obj4=new createobj0("ling")
|
||||
// 将say方法 放在构造函数外面后，say方法就成了全局变量 然后从构造函数中指向外面的say方法 也就是全局的say函数。
|
||||
// say函数中包含的是一个指向函数的指针（this）,因此 obj3和obj4就共享了一个在全局作用域下定义的函数。解决了上面出现的问题
|
||||
// 新的问题： 每定义一个方法 就需要在全局定义一个函数， 而且在全局作用域中定义的函数实际只能被某个对象调用
|
||||
// 这样的全局作用域有点名不副实 而且缺乏封装性
|
||||
// 为了解决上面所说的两个问题，我们有第三种方法：原型模式
|
||||
|
||||
// 方法三：原型模式创建对象
|
||||
// 初步认识原型：我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象
|
||||
//
|
||||
function creator(){
|
||||
|
||||
}
|
||||
creator.prototype.name="万能的小明"
|
||||
creator.prototype.say=function(){
|
||||
console.log("hello"+this.name)
|
||||
}
|
||||
var stu1=new creator()
|
||||
var stu2=new creator()
|
||||
stu1.say()
|
||||
stu2.say()
|
||||
console.log(stu1.say==stu2.say)
|
||||
//hello 万能的小明
|
||||
// true
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>对象创建</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
50
teaching/jwl/课件/js/hanshu.html
Normal file
50
teaching/jwl/课件/js/hanshu.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
// 声明一个函数
|
||||
// function greet(){
|
||||
// // alert("hello")
|
||||
// document.write("<p>asd</p") //在页面上输出内容 能解析Html标签
|
||||
|
||||
// // console.log() 控制台输出
|
||||
// // alert()
|
||||
// // prompt() 带输入框的弹窗
|
||||
// // confirm () 带按钮的弹窗
|
||||
|
||||
// }
|
||||
// greet() //函数执行
|
||||
|
||||
function add(e,f){
|
||||
// e是形参 函数参数的接收
|
||||
console.log(e,f)
|
||||
console.log("coin")
|
||||
return "llk"
|
||||
console.log("hello")
|
||||
return 3
|
||||
}
|
||||
var sum=add(2,9,0) //2 是实参
|
||||
console.log(sum)
|
||||
// 理论上说 形参跟实参的数量应该保持一致 如果说实参没有传的话 形参访问结果是undefind 如果形参本身有默认值 那么在实参没传的情况下 访问形参的结果是 默认值
|
||||
// 实参的数量大于形参的时候 函数体内访问不到除了形参之外的所有参数
|
||||
// 函数的执行过程 从函数体第一行代码开始 到函数体内第一个return 语句结束
|
||||
|
||||
|
||||
// 函数表达式
|
||||
var add1=function (a,b){
|
||||
return a+b
|
||||
}
|
||||
var sum1=add1(1,2)
|
||||
console.log(sum1)
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
63
teaching/jwl/课件/js/yuju.html
Normal file
63
teaching/jwl/课件/js/yuju.html
Normal file
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
// if 条件语句 if-elseif -else
|
||||
var a = 3;
|
||||
// if(a>10){
|
||||
// console.log("比10大")
|
||||
// }else if(a>5){
|
||||
// console.log("比10小 比5大")
|
||||
// }else{
|
||||
// console.log("比5小")
|
||||
// }
|
||||
|
||||
|
||||
switch (a) {
|
||||
case 1: console.log("a等于1");break
|
||||
case 2: console.log("a等于2");break
|
||||
default:console.log("error")
|
||||
}
|
||||
// case 1=> a==1
|
||||
// 每个case执行的语句后面都要加上break,不然的话所有的case都会执行
|
||||
// default 当判断的条件都不满足时（case后面的语句都不执行），就执行default 里面的语句
|
||||
|
||||
// console.log(res)
|
||||
|
||||
|
||||
// 循环语句 for while
|
||||
while(a<5){
|
||||
// console.log(a)
|
||||
a++
|
||||
}
|
||||
// while里面的语句 一定要写上++ 不然就是永动机
|
||||
|
||||
|
||||
// for(var i=0;i<5;i++){
|
||||
// // console.log(i)
|
||||
// }
|
||||
|
||||
// for in
|
||||
var arr=["a","b",'c','d'] //=>值
|
||||
// [0,1,2,3] =》下标 索引
|
||||
for(var m in arr){
|
||||
console.log(m,arr[m])
|
||||
}
|
||||
|
||||
var obj={name:"123",age:10}
|
||||
for(var x in obj){
|
||||
console.log(x,obj[x])
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
teaching/jwl/课件/js/yunsuanfu.html
Normal file
57
teaching/jwl/课件/js/yunsuanfu.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
var a=0
|
||||
a++ //一元运算符
|
||||
a+2 //二元运算符
|
||||
// 加减乘除 取余 赋值 || && 二元
|
||||
// 自增 自减 ！ 一元
|
||||
//逻辑运算符 &&(与 and) ||(或 or) ！(非)
|
||||
// a && b a||b !a
|
||||
var close=false
|
||||
var open= !close
|
||||
// console.log(open)
|
||||
|
||||
// 自增(++) 自减(--)
|
||||
var b=10
|
||||
// console.log(b++) // 后置自增 10 先操作再加
|
||||
// b => 11
|
||||
// console.log(++b) // 前置自增 12 先加再操作
|
||||
|
||||
var c=10
|
||||
// console.log(c--) // 9
|
||||
// console.log(--c) // 8
|
||||
|
||||
// console.log("7"==6)
|
||||
// console.log("6"===6)
|
||||
// ==(相等)判断的时候 两边数据类型不一样时 会发生隐式类型转换 先转换成Number类型再比较
|
||||
// ===（全等） 判断的时候 两边数据类型不一样时 不会发生隐式类型转换
|
||||
|
||||
//比较运算符
|
||||
// >,< >= <= != == ===
|
||||
// console.log(1+undefined) //false nan not a number
|
||||
|
||||
// console.log(0==NaN) //false
|
||||
// console.log(0==undefined) //false
|
||||
// console.log(0== null) //false
|
||||
// alert( null >= 0 ); // (3) true
|
||||
|
||||
//赋值运算符(
|
||||
// =
|
||||
// var s=8;
|
||||
// s+=9 //s=s+9
|
||||
// console.log(s) //17
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,141 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="gouwuchelist">
|
||||
|
||||
<div class="row1">
|
||||
<el-checkbox :label="checkeddianpu" @click="childClick"></el-checkbox>
|
||||
<svg t="1616141748140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2334" width="16" height="16"><path d="M761.9 927.6H264.1c-70.5 0-125.7-42.6-125.7-97V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v277.2c3.5 3.7 16.4 11.5 37.7 11.5H762c21.3 0 34.2-7.7 37.7-11.5V550.9c0-24.3 19.7-44 44-44s44 19.7 44 44v279.7c-0.1 54.4-55.3 97-125.8 97z" fill="#e2231a" p-id="2335"></path><path d="M513.7 633.7c-11.1 0-22.1-1.5-32.9-4.6l-181.2-52.2c-2.6-0.8-5.3-1.1-7.9-0.9l-129.3 8.2c-24.6 1.6-48.7-8.7-65.7-28.2C77 533.6 68.9 501.7 75 470.9l52.2-261.6c13-65 63-110.4 121.6-110.4h528.4c58.6 0 108.6 45.4 121.6 110.4L951 470.9c6.1 30.8-2 62.6-21.7 85.2-17 19.5-41.1 29.8-65.7 28.2l-129.4-8.2c-2.7-0.2-5.3 0.1-7.9 0.9l-179.4 52c-10.9 3.1-22.1 4.7-33.2 4.7zM293.2 488c10.4 0 20.7 1.5 30.7 4.4l181.2 52.1c5.7 1.6 11.5 1.6 17.2 0l179.4-52c12.4-3.6 25.2-5 38-4.2l124.5 7.9c0.7-1.8 1.2-4.5 0.5-8l-52.2-261.6c-4.6-23-19.4-39.7-35.3-39.7H248.8c-15.9 0-30.7 16.7-35.3 39.7l-52.2 261.6c-0.7 3.5-0.1 6.2 0.5 8l124.3-7.9c2.4-0.2 4.7-0.3 7.1-0.3z m576 8.5h0.2-0.2z" fill="#e2231a" p-id="2336"></path><path d="M513.7 447.6c-24.3 0-44-19.7-44-44V293.5c0-24.3 19.7-44 44-44s44 19.7 44 44v110.2c0 24.2-19.7 43.9-44 43.9zM702.9 422.7c-20.9 0-39.5-15-43.3-36.3l-15.2-85.2c-4.3-23.9 11.7-46.8 35.6-51 24.1-4.3 46.8 11.7 51 35.6l15.2 85.2c4.3 23.9-11.7 46.8-35.6 51-2.6 0.4-5.2 0.7-7.7 0.7zM319.8 422.7c-2.5 0-5.1-0.2-7.6-0.7-24-4.2-39.9-27-35.8-50.9l14.9-85.2c4.2-23.9 27-39.9 50.9-35.8 24 4.2 39.9 27 35.8 50.9l-14.9 85.2c-3.7 21.4-22.3 36.5-43.3 36.5z" fill="#e2231a" p-id="2337"></path></svg>
|
||||
<span>店铺：</span>
|
||||
<a href="">{{shangpin.dianpuname}}</a>
|
||||
</div>
|
||||
<div class="gwc-content">
|
||||
<div class="tuhejieshao">
|
||||
<el-checkbox :label="checkeddingdan" ></el-checkbox>
|
||||
<img src="..\assets\static\img\clothes.jpg" alt="">
|
||||
<p>{{shangpin.shangpinname}}</p>
|
||||
</div>
|
||||
<div class="canshu">
|
||||
<p v-for="(casnhu,index) in shangpin.canshulist" :key="index">{{casnhu.canshuname}}：{{casnhu.canshuvalue}}</p>
|
||||
<svg style="display:none" t="1616146720956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3457" width="16" height="16"><path d="M369.269 883.675l-321.935 91.337 91.335-321.938z" p-id="3458" fill="#9c9c9c"></path><path d="M1000.772 252.109l-77.526 77.526-230.598-230.598 77.522-77.524c0 0 36.951-36.895 74.509 0.663 37.562 37.563 110.575 110.574 151.709 151.71 41.138 41.134 4.385 78.223 4.385 78.223z" p-id="3459" fill="#9c9c9c"></path><path d="M900.035 352.787l-507.821 507.821-230.54-230.54 507.821-507.821 230.54 230.54z" p-id="3460" fill="#9c9c9c"></path></svg>
|
||||
</div>
|
||||
<div class="danjia">
|
||||
<p>￥{{(shangpin.yuanjia).toFixed(2)}}</p>
|
||||
<p>￥{{(shangpin.xianjia).toFixed(2)}}</p>
|
||||
</div>
|
||||
<div class="shuliang">
|
||||
<el-input-number size="mini" v-model="shangpin.num4" :min="1" @change="handleChange"></el-input-number>
|
||||
</div>
|
||||
<div class="jine">
|
||||
<!-- <span>￥{{(shangpin.xianjia*shangpin.num4).toFixed(2)}}</span> -->
|
||||
|
||||
<span>￥{{(shangpin.xianjia,shangpin.num4)}}</span>
|
||||
</div>
|
||||
<div class="caozuo">
|
||||
<a href="">移入收藏夹</a>
|
||||
<a href="">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'gouwuchelist',
|
||||
props:{
|
||||
shangpin:Object
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
childClick(e){
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.gouwuchelist .row1{
|
||||
padding: 10px 30px;
|
||||
|
||||
}
|
||||
.gouwuchelist .row1 svg{
|
||||
margin: 0px 5px 0 15px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
.gouwuchelist .row1 span,a{
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.gwc-content {
|
||||
padding:20px 0 20px 0;
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fcfcfc;
|
||||
border:1px solid #e7e7e7; ;
|
||||
}
|
||||
.gwc-content .tuhejieshao p{
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
height: 31px;
|
||||
font-size: 12.5px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.gwc-content .tuhejieshao img{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.gwc-content .tuhejieshao{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.gwc-content .canshu{
|
||||
font-size: 13px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.gwc-content .danjia p:first-child{
|
||||
font-size: 12px;
|
||||
text-decoration: line-through;
|
||||
color: darkgray;
|
||||
}
|
||||
.gwc-content .danjia p:last-child{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.gwc-content .caozuo a{
|
||||
display: block;
|
||||
/* text-decoration: none; */
|
||||
color: black;
|
||||
}
|
||||
.gwc-content .caozuo a:hover{
|
||||
text-decoration: #e2231a;
|
||||
color: #e2231a;
|
||||
}
|
||||
.gwc-content .jine{
|
||||
color: #e2231a;
|
||||
font-weight:bold;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.gwc-content .shuliang{
|
||||
margin-left: -20px;
|
||||
}
|
||||
</style>
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
<div class="gwc-content">
|
||||
<div class="tuhejieshao">
|
||||
<el-checkbox :label="shangpin.xianjia" @change="xz(shangpin.xianjia)">
|
||||
<el-checkbox v-model="check" :label="shangpin.xianjia" @change="xz(shangpin.xianjia)">
|
||||
<img src="..\assets\static\img\clothes.jpg" alt="" />
|
||||
<p>{{ shangpin.shangpinname }}</p>
|
||||
</el-checkbox>
|
||||
@ -100,29 +100,30 @@ export default {
|
||||
name: "gouwuchelist",
|
||||
props: {
|
||||
shangpin: Object,
|
||||
index:Number
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
check:false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
console.log(value,":addvlaue");
|
||||
this.shopnum=value
|
||||
this.$emit("add",[value,this.index])
|
||||
},
|
||||
childClick(e) {
|
||||
console.log(e);
|
||||
},
|
||||
xz(e){
|
||||
this.check=this.check?false:true
|
||||
console.log(e,this.check)
|
||||
if(e){
|
||||
this.$emit("xz",e)
|
||||
this.$emit("xz",[e,this.check,this.index])
|
||||
}
|
||||
|
||||
}
|
||||
// selectone(value) {
|
||||
// console.log(value)
|
||||
// // let checkedCount = value.length;
|
||||
// // this.checkAll = checkedCount === this.cities.length;
|
||||
// // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
|
||||
<div class="shangpin">
|
||||
|
||||
<img class="spimg" src="//img12.360buyimg.com/jdcms/s150x150_jfs/t1/159091/6/13582/351629/60515ec7Eae162e4d/5fbdf654ea0fd7cc.jpg.webp" alt="美国（G-force）无链条折叠电动车外卖代驾成人电动自行车迷你轴传动电瓶车闪电发货 深空灰-汽车电芯无链条传动技术-6AH60公里">
|
||||
<div class="box">
|
||||
<p class="jianjie">
|
||||
美国（G-force）无链条折叠电动车外卖代驾成人电动自行车迷你轴传动电瓶车闪电发货 深空灰-汽车电芯无链条传动技术-6AH60公里
|
||||
</p>
|
||||
<div class="price">
|
||||
<i>¥</i>
|
||||
<span class="zheng">2998.<span class="ling">00</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'shangpin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.shangpin{
|
||||
width: 190px;
|
||||
height: 266px;
|
||||
margin: 0 5px 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.shangpin .spimg{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 30px 0 0 28px;
|
||||
}
|
||||
.shangpin .jianjie{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
.shangpin .box{
|
||||
margin: 30px 15px 0 15px;
|
||||
}
|
||||
.shangpin .box .price{
|
||||
color: #e1251b;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
.shangpin .box .price i{
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-family: MicrosoftYahei-regular,Arial,Helvetica,sans-serif;
|
||||
}
|
||||
.shangpin .box .price .zheng{
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-family: arial,sans-serif;
|
||||
}
|
||||
.shangpin .box .price .ling{
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@ -34,7 +34,9 @@
|
||||
v-for="(shangpin, index) in shangpinlist"
|
||||
:shangpin="shangpin"
|
||||
:key="index"
|
||||
:index="index"
|
||||
@xz="xuanzhong"
|
||||
@add="addnum"
|
||||
></gouwuchelist>
|
||||
</el-checkbox-group>
|
||||
|
||||
@ -146,9 +148,16 @@ export default {
|
||||
],
|
||||
checkAll: false,
|
||||
selected: [],
|
||||
// cities: cityOptions,
|
||||
isIndeterminate: true,
|
||||
checkindex: 0,
|
||||
xzdata: [],
|
||||
shopnums:[]
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
for(let i in this.shangpinlist){
|
||||
this.shopnums.push(this.shangpinlist[i].num4)
|
||||
}
|
||||
console.log(this.shopnums)
|
||||
},
|
||||
components: {
|
||||
navbar1,
|
||||
@ -156,31 +165,50 @@ export default {
|
||||
gouwuchelist,
|
||||
// bottomjiesuan,
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectone(value) {
|
||||
console.log(value);
|
||||
// this.selected=[]
|
||||
// let checkedCount = value.length;
|
||||
// this.checkAll = checkedCount === this.cities.length;
|
||||
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
addnum(e) {
|
||||
console.log(e,this.shangpinlist[this.checkindex].num4)
|
||||
this.shopnums[e[1]]=e[0]
|
||||
// this.shangpinlist[this.checkindex].num4=e
|
||||
console.log(this.shopnums)
|
||||
},
|
||||
selectone(e) {
|
||||
console.log(e, "selectone");
|
||||
// for(let )
|
||||
// this.sumnum=this.s
|
||||
},
|
||||
xuanzhong(e) {
|
||||
console.log(e);
|
||||
console.log(e, "xuanzhong");
|
||||
this.xzdata = e;
|
||||
if (e[1]) {
|
||||
// console.log(this.shangpinlist[this.checkindex],"indexknnsk")
|
||||
this.sumprice = parseFloat(this.sumprice + e[0]);
|
||||
this.sumnum=this.sumnum+this.shopnums[this.checkindex]
|
||||
} else {
|
||||
this.sumprice = parseFloat(this.sumprice - e[0]);
|
||||
this.sumnum=this.sumnum-this.shopnums[this.checkindex]
|
||||
}
|
||||
|
||||
// this.selected.push(e)
|
||||
},
|
||||
selectall(e) {
|
||||
console.log(e)
|
||||
if (e){
|
||||
console.log(e);
|
||||
if (e) {
|
||||
for (let i in this.shangpinlist) {
|
||||
// this.selected[i]=this.shangpinlist[i].xianjia;
|
||||
this.selected.push(this.shangpinlist[i].xianjia)
|
||||
// this.zong = this.zong + this.shangpinlist[i].xianjia;
|
||||
// this.selected[i]=this.shangpinlist[i].xianjia;
|
||||
this.selected.push(this.shangpinlist[i].xianjia);
|
||||
this.sumprice = parseFloat(
|
||||
this.sumprice + this.shangpinlist[i].xianjia
|
||||
);
|
||||
// this.zong = this.zong + this.shangpinlist[i].xianjia;
|
||||
}
|
||||
console.log(this.selected)
|
||||
console.log(this.selected);
|
||||
// console.log(this.checkedlist);
|
||||
} else {
|
||||
this.selected=[]
|
||||
console.log(this.selected)
|
||||
this.selected = [];
|
||||
console.log(this.selected);
|
||||
this.sumprice = 0;
|
||||
// this.zong = 0;
|
||||
}
|
||||
},
|
||||
|
||||
18
zuoye/js/js/函数.md
Normal file
18
zuoye/js/js/函数.md
Normal file
@ -0,0 +1,18 @@
|
||||
# 函数
|
||||
* jsinfo里的练习
|
||||
* 编写一个函数，计算三个数字的大小，按从小到大顺序输出
|
||||
* 编写一个函数，计算任意两个数字之间所能组成的奇数个数，数字必须是个位数
|
||||
比如： 计算0-3之间能组成的奇数个是01、21、03、13、23、31
|
||||
|
||||
* 某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，
|
||||
加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，
|
||||
第二位和第三位交换，请编写一个函数，传入原文，输出密文
|
||||
|
||||
* 用*实现等边三角形
|
||||
|
||||
* 编写一个函数来验证输入的字符串是否是有效的 IPv4 地址。
|
||||
|
||||
如果是有效的 IPv4 地址，返回 "IPv4" ；
|
||||
如果不是上述类型的 IP 地址，返回 "Neither" 。
|
||||
|
||||
IPv4 地址由十进制数和点来表示，每个地址包含 4 个十进制数，其范围为 0 - 255， 用(".")分割。比如，172.16.254.1；
|
||||
BIN
zuoye/js/js/函数.pdf
Normal file
BIN
zuoye/js/js/函数.pdf
Normal file
Binary file not shown.
60
zuoye/js/js/对象1.md
Normal file
60
zuoye/js/js/对象1.md
Normal file
@ -0,0 +1,60 @@
|
||||
# 对象练习
|
||||
* 创建一个对象 包含如下内容
|
||||
* code 值为200
|
||||
* msg 值为"请求成功"
|
||||
* data 值为数组[]
|
||||
* data中包含如下内容
|
||||
* shopname 商品名
|
||||
|
||||
* pic 商品图片
|
||||
|
||||
* desc 商品简介
|
||||
|
||||
* price 商品价格
|
||||
|
||||
* kucun 库存
|
||||
|
||||
* xiaoliang 销量
|
||||
|
||||
* caozuo 操作
|
||||
|
||||
注 写的时候把值赋上
|
||||
|
||||
* 把上面那个题目用构造函数的重新写一份，并生成4个内容不同的对象
|
||||
|
||||
* 创建一个对象 包含如下内容
|
||||
* store 商店名称
|
||||
* addr 商店地址
|
||||
* sale: 方法 输出xxx商店正在大甩卖
|
||||
|
||||
* 遍历上面的两个对象 并输出每个的键和值
|
||||
|
||||
* 从外面给商店的对象增添一个shoplist的属性 该属性是一个数组 包含英雄名称跟英雄价格 货币单位以金币计算（5个王者英雄就ok）
|
||||
|
||||
* 把第一题中的data中的对象里面的caozuo 属性删除
|
||||
|
||||
|
||||
* 分析
|
||||
```
|
||||
var F = function () {}
|
||||
Object.prototype.a = function () {}
|
||||
Function.prototype.b = function () {}
|
||||
|
||||
var f = new F()
|
||||
// 请问f有方法a 方法b吗
|
||||
|
||||
|
||||
* 写出p1,p2,person,obj,Function,Object等的原型链
|
||||
function Person(){}
|
||||
|
||||
let p1 = new Person()
|
||||
let p2 = new Person()
|
||||
let obj = {}
|
||||
* 通过原型链实现祖孙三层继承关系 （每个对象包含三个属性，两个方法）
|
||||
* 访问上个题中原型中的对象
|
||||
* 用用原型链继承封装dom操作
|
||||
* 创建元素
|
||||
* 修改属性
|
||||
* 修改内容
|
||||
* 添加事件
|
||||
|
||||
BIN
zuoye/js/js/对象1.pdf
Normal file
BIN
zuoye/js/js/对象1.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/js/语句.assets/image-20210324153432392.png
Normal file
BIN
zuoye/js/js/语句.assets/image-20210324153432392.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
35
zuoye/js/js/语句.md
Normal file
35
zuoye/js/js/语句.md
Normal file
@ -0,0 +1,35 @@
|
||||
# 语句
|
||||
* 完成jsinfo相关练习
|
||||
* 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
|
||||
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
|
||||
2、如果 num 能被 3 整除，返回字符串 fizz
|
||||
3、如果 num 能被 5 整除，返回字符串 buzz
|
||||
4、如果参数为空或者不是 Number 类型，返回 false
|
||||
5、其余情况，返回参数 num
|
||||
|
||||
示例
|
||||
输入：15
|
||||
输出：fizzbuzz
|
||||
|
||||
* 计算给定数组 arr 中所有元素的总和
|
||||
|
||||
输入 [ 1, 2, 3, 4 ]
|
||||
输出： 10
|
||||
|
||||
* 找出数组 arr 中重复出现过的元素
|
||||
输入[1, 2, 4, 4, 3, 3, 1, 5, 3]
|
||||
输出：[1, 3, 4]
|
||||
|
||||
* 写一个函数 统计数组 arr 中值等于 item 的元素出现的次数
|
||||
输入： [1, 2, 4, 4, 3, 4, 3], 4
|
||||
输出：3
|
||||
|
||||
* 给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按 任意顺序 返回。
|
||||
|
||||
给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。
|
||||
|
||||
|
||||
|
||||
|
||||
输入：digits = "23"
|
||||
输出：["ad","ae","af","bd","be","bf","cd","ce","cf"]
|
||||
BIN
zuoye/js/js/语句.pdf
Normal file
BIN
zuoye/js/js/语句.pdf
Normal file
Binary file not shown.
BIN
zuoye/js/js/运算符.assets/image-20210324114152811.png
Normal file
BIN
zuoye/js/js/运算符.assets/image-20210324114152811.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
12
zuoye/js/js/运算符.assets/数组.md
Normal file
12
zuoye/js/js/运算符.assets/数组.md
Normal file
@ -0,0 +1,12 @@
|
||||
# 数组
|
||||
* 笔记跟课上的内容整理
|
||||
* 用两种方式定义一个数组，并遍历出数组中的每一个元素
|
||||
* 定义一个数组来存储12个学生的成绩{72,89,65,58,87,91,53,82,71,93,76,68}，计算并输出学生的平均成绩。
|
||||
* 创建一个4位的二维数组，并遍历循环出每一个元素
|
||||
* 写一个函数实现 传入一个数组 返回他冒泡排序处理后的结果
|
||||
* 三种数组去重的方法
|
||||
* 用js实现随机选取10~100之间的10个数字，存入一个数组，并排序
|
||||
//要是获取不重复的，则对随机数再进行去重。
|
||||
|
||||
* 定义一个长度为6的数组（元素为数字，并且有可能重复），请给Array.prototype增加一个方法（方法名自取），该方法能去掉数组中全部最大和最小的数字。
|
||||
数组最大值
|
||||
BIN
zuoye/js/js/运算符.assets/数组.pdf
Normal file
BIN
zuoye/js/js/运算符.assets/数组.pdf
Normal file
Binary file not shown.
4
zuoye/js/js/运算符.md
Normal file
4
zuoye/js/js/运算符.md
Normal file
@ -0,0 +1,4 @@
|
||||
# 运算符
|
||||
* 完成教案后面的4个练习
|
||||
* 预习if语句，函数定义传参 ，定义一个函数 返回值实现两个参数的加减乘除 取余 乘方和相加的计算器功能
|
||||
* 完成逻辑运算符后面的9个练习
|
||||
BIN
zuoye/js/js/运算符.pdf
Normal file
BIN
zuoye/js/js/运算符.pdf
Normal file
Binary file not shown.
BIN
实战项目/1_1_惠民补助业务2先不做.pdf
Normal file
BIN
实战项目/1_1_惠民补助业务2先不做.pdf
Normal file
Binary file not shown.
BIN
实战项目/bbs.png
Normal file
BIN
实战项目/bbs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
451
考试/api.html
Normal file
451
考试/api.html
Normal file
@ -0,0 +1,451 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>商品管理</title>
|
||||
<meta charset="utf-8" />
|
||||
<style>@charset "UTF-8";
|
||||
html,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* 设置滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* 外层轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset006pxrgba(255, 0, 0, 0.3);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 25px;
|
||||
color: #393838;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 10px 0 15px 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
a, a:link, a:visited {
|
||||
color: #34495e;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #59d69d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #404040;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
font-size: 32px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 3px solid #59d69d;
|
||||
padding-left: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0 0 19px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 13px 13px 21px 15px;
|
||||
margin-bottom: 18px;
|
||||
font-family: georgia, serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote:before {
|
||||
font-size: 40px;
|
||||
margin-left: -10px;
|
||||
font-family: georgia, serif;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-family: Monaco, Andale Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #fee9cc;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
padding: 1px 3px;
|
||||
font-size: 12px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: 14px;
|
||||
margin: 0 0 18px;
|
||||
line-height: 16px;
|
||||
font-size: 11px;
|
||||
border: 1px solid #d9d9d9;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: #f6f6f6;
|
||||
color: #737373;
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 0.83em;
|
||||
vertical-align: super;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body,
|
||||
code,
|
||||
pre code,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
table,
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.table-of-contents {
|
||||
position: fixed;
|
||||
top: 61px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.table-of-contents > ul > li > a {
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.table-of-contents ul {
|
||||
overflow: auto;
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
padding: 0px 0px;
|
||||
box-sizing: border-box;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.table-of-contents ul li {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table-of-contents a {
|
||||
padding: 2px 0px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content-right {
|
||||
max-width: 700px;
|
||||
margin-left: 290px;
|
||||
padding-left: 70px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.content-right h2:target {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
body > p {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
body > table {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
body > pre {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.curProject {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
font-size: 25px;
|
||||
color: black;
|
||||
margin-left: -240px;
|
||||
width: 240px;
|
||||
padding: 5px;
|
||||
line-height: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.g-doc {
|
||||
margin-top: 56px;
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.curproject-name {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.m-header {
|
||||
background: #32363a;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding-left: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.m-header .title {
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
margin: 0;
|
||||
margin-left: 16px;
|
||||
padding: 0;
|
||||
line-height: 56px;
|
||||
border: none;
|
||||
}
|
||||
.m-header .nav {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 0;
|
||||
}
|
||||
.m-header .nav a {
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
padding: 8px;
|
||||
transition: color .2s;
|
||||
}
|
||||
.m-header .nav a:hover {
|
||||
color: #59d69d;
|
||||
}
|
||||
|
||||
.m-footer {
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=defaultTheme.css.map */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="m-header">
|
||||
<a href="#" style="display: inherit;"><svg class="svg" width="32px" height="32px" viewBox="0 0 64 64" version="1.1"><title>Icon</title><desc>Created with Sketch.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"><stop stop-color="#FFFFFF" offset="0%"></stop><stop stop-color="#F2F2F2" offset="100%"></stop></linearGradient><circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048"></circle><filter x="-85.4%" y="-68.3%" width="270.7%" height="270.7%" filterUnits="objectBoundingBox" id="filter-3"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.159703351 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix></filter></defs><g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="大屏幕"><g id="Icon"><circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32"></circle><path d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z" id="blue" fill="#2359F1" fill-rule="nonzero"></path><path d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z" id="green" fill="#57CF27" fill-rule="nonzero" transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "></path><path d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z" id="red" fill="#FF561B" fill-rule="nonzero" transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "></path><g id="inner-round"><use fill="black" fill-opacity="1" filter="url(#filter-3)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-2"></use><use fill="#F7F7F7" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path-2"></use></g></g></g></g></svg></a>
|
||||
<a href="#"><h1 class="title">YAPI 接口文档</h1></a>
|
||||
<div class="nav">
|
||||
<a href="https://hellosean1025.github.io/yapi/">YApi</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="g-doc">
|
||||
<div class="table-of-contents"><ul><li><a href="#u516cu5171u5206u7c7b">公共分类</a><ul><li><a href="#u67e5u8be2u5546u54c10a3ca20id3du67e5u8be2u5546u54c13e203ca3e">查询商品
|
||||
<a id=查询商品> </a></a></li><li><a href="#u6dfbu52a0u5546u54c10a3ca20id3du6dfbu52a0u5546u54c13e203ca3e">添加商品
|
||||
<a id=添加商品> </a></a></li></ul></li></ul></div>
|
||||
<div id="right" class="content-right">
|
||||
<h1 class="curproject-name"> 商品管理 </h1>
|
||||
<h3 id="">公共信息</h3>
|
||||
<h1>接口前缀</h1>
|
||||
<p><code data-backticks="1">https://kaoshi-shangpin.theluyuan.com/</code></p>
|
||||
<p>例如 /findshop 请求地址就是 <code data-backticks="1">https://kaoshi-shangpin.theluyuan.com/findshop</code></p>
|
||||
<h1 id="u516cu5171u5206u7c7b">公共分类</h1>
|
||||
<p></p>
|
||||
<h2 id="u67e5u8be2u5546u54c10a3ca20id3du67e5u8be2u5546u54c13e203ca3e">查询商品
|
||||
<a id=查询商品> </a></h2>
|
||||
<p></p>
|
||||
<h3 id="-2">基本信息</h3>
|
||||
<p><strong>Path：</strong> /findshop</p>
|
||||
<p><strong>Method：</strong> GET</p>
|
||||
<p><strong>接口描述：</strong></p>
|
||||
<h3 id="-3">请求参数</h3>
|
||||
<h3 id="-4">返回数据</h3>
|
||||
<table>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key=name>名称</th><th key=type>类型</th><th key=required>是否必须</th><th key=default>默认值</th><th key=desc>备注</th><th key=sub>其他信息</th>
|
||||
</tr>
|
||||
</thead><tbody className="ant-table-tbody"><tr key=0-0><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> code</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">0成功 1 失败</span></td><td key=5></td></tr><tr key=0-1><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> data</span></td><td key=1><span>object []</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">返回数据列表</span></td><td key=5><p key=3><span style="font-weight: '700'">item 类型: </span><span>object</span></p></td></tr><tr key=0-1-0><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> _id</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">数据库id </span></td><td key=5></td></tr><tr key=0-1-1><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> mingcheng</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品名称</span></td><td key=5></td></tr><tr key=0-1-2><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> fenlei</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品分类</span></td><td key=5></td></tr><tr key=0-1-3><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> maidian</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品卖点</span></td><td key=5></td></tr><tr key=0-1-4><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> jiage</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品价格</span></td><td key=5></td></tr><tr key=0-1-5><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> huodongjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品活动价格</span></td><td key=5></td></tr><tr key=0-1-6><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> kucun</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品库存</span></td><td key=5></td></tr><tr key=0-1-7><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> shangjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">是否上架 1上架 0不上架</span></td><td key=5></td></tr><tr key=0-1-8><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> xiangqing</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品详情</span></td><td key=5></td></tr><tr key=0-1-9><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> xiaoliang</span></td><td key=1><span>number</span></td><td key=2>非必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品销量</span></td><td key=5></td></tr><tr key=0-1-10><td key=0><span style="padding-left: 20px"><span style="color: #8c8a8a">├─</span> num_key</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">唯一数字id</span></td><td key=5></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="u6dfbu52a0u5546u54c10a3ca20id3du6dfbu52a0u5546u54c13e203ca3e">添加商品
|
||||
<a id=添加商品> </a></h2>
|
||||
<p></p>
|
||||
<h3 id="-5">基本信息</h3>
|
||||
<p><strong>Path：</strong> /addshop</p>
|
||||
<p><strong>Method：</strong> POST</p>
|
||||
<p><strong>接口描述：</strong></p>
|
||||
<h3 id="-6">请求参数</h3>
|
||||
<p><strong>Headers</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数名称</th>
|
||||
<th>参数值</th>
|
||||
<th>是否必须</th>
|
||||
<th>示例</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Content-Type</td>
|
||||
<td>application/json</td>
|
||||
<td>是</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Body</strong></p>
|
||||
<table>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key=name>名称</th><th key=type>类型</th><th key=required>是否必须</th><th key=default>默认值</th><th key=desc>备注</th><th key=sub>其他信息</th>
|
||||
</tr>
|
||||
</thead><tbody className="ant-table-tbody"><tr key=0-0><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> mingcheng</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品名称</span></td><td key=5></td></tr><tr key=0-1><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> fenlei</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品分类 1代表手机数码 2代表家用电器 3代表男装 4代表女装</span></td><td key=5></td></tr><tr key=0-2><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> maidian</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品卖点</span></td><td key=5></td></tr><tr key=0-3><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> jiage</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品价格 </span></td><td key=5></td></tr><tr key=0-4><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> huodongjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品活动价格</span></td><td key=5></td></tr><tr key=0-5><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> kucun</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品库存</span></td><td key=5></td></tr><tr key=0-6><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> xiaoliang</span></td><td key=1><span>number</span></td><td key=2>非必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品销量</span></td><td key=5></td></tr><tr key=0-7><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> shangjia</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">是否上架 1 上架 0不上架</span></td><td key=5></td></tr><tr key=0-8><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> xiangqing</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">商品详情</span></td><td key=5></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 id="-7">返回数据</h3>
|
||||
<table>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key=name>名称</th><th key=type>类型</th><th key=required>是否必须</th><th key=default>默认值</th><th key=desc>备注</th><th key=sub>其他信息</th>
|
||||
</tr>
|
||||
</thead><tbody className="ant-table-tbody"><tr key=0-0><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> code</span></td><td key=1><span>number</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">0 成功 1 失败</span></td><td key=5></td></tr><tr key=0-1><td key=0><span style="padding-left: 0px"><span style="color: #8c8a8a"></span> msg</span></td><td key=1><span>string</span></td><td key=2>必须</td><td key=3></td><td key=4><span style="white-space: pre-wrap">信息</span></td><td key=5></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<footer class="m-footer">
|
||||
<p>Build by <a href="https://ymfe.org/">YMFE</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
考试/htmlcss测试.assets/image-20210121161513990.png
Normal file
BIN
考试/htmlcss测试.assets/image-20210121161513990.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
考试/htmlcss测试.assets/image-20210121161533574.png
Normal file
BIN
考试/htmlcss测试.assets/image-20210121161533574.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
考试/htmlcss测试.assets/image-20210121161544894.png
Normal file
BIN
考试/htmlcss测试.assets/image-20210121161544894.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
考试/htmlcss测试.docx
Normal file
BIN
考试/htmlcss测试.docx
Normal file
Binary file not shown.
47
考试/htmlcss测试.md
Normal file
47
考试/htmlcss测试.md
Normal file
@ -0,0 +1,47 @@
|
||||
# 前端基础测试
|
||||
|
||||
### 考试说明：
|
||||
|
||||
1. 在电脑上新建一个以自己名字拼音命名的文件夹 完成答题后将文件夹压缩发到微信
|
||||
2. 本次考试试题都是开放性题目，实现题目要求的效果即可，阅卷采用 采点得分制
|
||||
3. 考试时间 180分钟
|
||||
4. 图片仅限于小图标，好像也用不到图标，布局样式以写的内容为准，大面积截图的本题不得分 情节严重者本次考试分数为0分
|
||||
|
||||
### 考试内容
|
||||
|
||||
一、京贡商城 h5端
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
根据蓝湖设计图要求高度还原
|
||||
|
||||
要求：
|
||||
|
||||
1. 还原设计图的页面架构，内容，图片，文字...
|
||||
2. 文件命名规范，目录结构规范，变量命名有较高的可读性
|
||||
3. 运行效果跟设计图高度一致 不能出现横向滚动条
|
||||
4. 灵活运用各种标签 各种布局方式
|
||||
|
||||
|
||||
|
||||
评分标准：
|
||||
|
||||
根据完成状况，代码可读性进行评分
|
||||
|
||||
顶部导航 10分
|
||||
|
||||
广告（大） 15分
|
||||
|
||||
导航菜单 15分
|
||||
|
||||
小的广告 每个10分
|
||||
|
||||
今日主推 10分
|
||||
|
||||
为您推荐 15分
|
||||
|
||||
底部导航 15分
|
||||
BIN
考试/htmlcss测试.pdf
Normal file
BIN
考试/htmlcss测试.pdf
Normal file
Binary file not shown.
98
考试/前端基础测试.md
Normal file
98
考试/前端基础测试.md
Normal file
@ -0,0 +1,98 @@
|
||||
# 前端基础测试
|
||||
|
||||
### 考试说明：
|
||||
|
||||
1. 在电脑上新建一个以自己名字拼音命名的文件夹 完成答题后将文件夹压缩发到微信群
|
||||
2. 本次考试试题都是开放性题目，实现题目要求的效果即可，阅卷采用 采点得分制
|
||||
3. 图片仅限于小图标，好像也用不到图标，布局样式以写的内容为准，大面积截图的本题不得分 情节严重者本次考试分数为0分
|
||||
4. 题目中只规定显示的内容和交互的要求，对样式不做描述，样式方面尽可能做的好看就行
|
||||
|
||||
### 考试内容
|
||||
|
||||
一、商品添加表单
|
||||
|
||||
包括内容：
|
||||
|
||||
- 商品名称（必填）
|
||||
|
||||
- 商品分类（下拉框 必选）
|
||||
|
||||
下拉框内容： 手机数码 家用电器 男装 女装
|
||||
|
||||
- 商品卖点 （选填 商品卖点描述）
|
||||
|
||||
- 商品价格（必填）
|
||||
|
||||
- 活动价（选填）
|
||||
|
||||
- 商品库存（必填）
|
||||
|
||||
- 商品销量（选填）
|
||||
|
||||
- 是否上架 （单选框 必选）
|
||||
|
||||
- 商品详情（文本域 必填）
|
||||
|
||||
- 保存按钮
|
||||
|
||||
要求
|
||||
|
||||
1. 除了指定控件的之外，其他的都是文本框
|
||||
|
||||
2. 商品名称为空时 输入框显示预期值“请输入商品名称”，
|
||||
|
||||
商品卖点为空时 输入框显示预期值”请输入商品卖点“，
|
||||
|
||||
商品价格为空时，输入框显示预期值”请输入商品价格“
|
||||
|
||||
商品库存为空时，输入框显示预期值”请输入商品库存“
|
||||
|
||||
商品销量为空时 输入框显示预期值”请输入商品销量“
|
||||
|
||||
商品详情为空时，textarea中显示 ”请输入商品详情“
|
||||
|
||||
3. 用户点击保存时，需要做如下验证
|
||||
|
||||
- 所有必选项的为空验证 为空时提示”请完善商品信息“
|
||||
- 活动价必须低于商品价格
|
||||
- 商品销量必须低于商品库存
|
||||
|
||||
4. 验证通过后 根据接口说明表生成对象并转成json字符串，调用后台接口 根据返回值说明 成功后弹框保存成功
|
||||
|
||||
|
||||
|
||||
二、商品列表
|
||||
|
||||
将商品添加的内容显示在列表上包括内容：
|
||||
|
||||
- 商品名称
|
||||
|
||||
- 商品分类
|
||||
|
||||
- 商品卖点
|
||||
|
||||
- 商品价格
|
||||
|
||||
- 活动价
|
||||
|
||||
- 商品库存
|
||||
|
||||
- 商品销量
|
||||
|
||||
- 是否上架
|
||||
|
||||
|
||||
### 说明
|
||||
|
||||
商品分类： 1代表手机数码 2代表家用电器 3代表男装 4代表女装
|
||||
|
||||
是否上架：1代表是 2 代表否
|
||||
|
||||
价格相关单位为元
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
接口说明：
|
||||
|
||||
322
考试/前端考试原题 - 副本.md
Normal file
322
考试/前端考试原题 - 副本.md
Normal file
@ -0,0 +1,322 @@
|
||||
# 考试题目
|
||||
|
||||
## 填空
|
||||
1. js变量类型一共有 2 种，分别是哪些
|
||||
|
||||
原始值和引用值
|
||||
|
||||
原始值 number string boolean undefined nll
|
||||
|
||||
引用值 object
|
||||
|
||||
2. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么? 25.5
|
||||
|
||||
3. 1 + ‘1’ 的运算结果是 11
|
||||
|
||||
4. 0 || 3 的返回结果是 3
|
||||
|
||||
5. 1 && 5 的返回结果是 5
|
||||
|
||||
6. 三种数据类型检测的方法 typeof， instance of ，object.prototype.toString.call()
|
||||
|
||||
7. js选中dom元素的几种方式 至少5种
|
||||
|
||||
document.getelementbyid
|
||||
|
||||
document.getelementsbyclassname
|
||||
|
||||
document.getelementsbytagname
|
||||
|
||||
document.getelementsbyname
|
||||
|
||||
document.queryselectorall
|
||||
|
||||
|
||||
|
||||
8. jq选择器 至少5种(含组合型选择器) 并附上说明
|
||||
|
||||
$('#id')
|
||||
|
||||
$('.类名')
|
||||
|
||||
$('标签名')
|
||||
|
||||
$('[href='aaa']')
|
||||
|
||||
|
||||
|
||||
## 简答
|
||||
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。
|
||||
|
||||
var arr=[1,2,4,8,32]
|
||||
|
||||
var sum=0
|
||||
|
||||
for(let i in arr){
|
||||
|
||||
sum+=arr[i]
|
||||
|
||||
}
|
||||
|
||||
document.write(sum)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加)
|
||||
|
||||
function add(e){
|
||||
|
||||
var sum=0
|
||||
|
||||
for(let i=1;i<=e;i++){
|
||||
|
||||
sum+=i
|
||||
|
||||
}
|
||||
|
||||
return sum
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
|
||||
|
||||
function panduan(e){
|
||||
|
||||
if(e%2){
|
||||
|
||||
return 0
|
||||
|
||||
}else{
|
||||
|
||||
return 1
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 有下面一段代码 请写出答案
|
||||
```javascript
|
||||
let obg = {
|
||||
name:"啦啦啦",
|
||||
age:18
|
||||
};
|
||||
function func(o){
|
||||
o.name = 123
|
||||
}
|
||||
func(obg);
|
||||
|
||||
```
|
||||
执行完之后obg的值是什么， 为什么
|
||||
|
||||
{name:123,age:18}
|
||||
|
||||
func(obg) 把obg 当作参数传了进去 然后 从函数体内 修改了obj里name的值为123
|
||||
|
||||
然后 重新输出obg时 name 就变成123了
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 有下面一段代码 请写出答案
|
||||
```javascript
|
||||
let n = "喵喵喵"
|
||||
window.n = "汪汪汪"
|
||||
let obg = {
|
||||
n:"啦啦啦",
|
||||
echo: ()=> {
|
||||
return this.n;
|
||||
}
|
||||
}
|
||||
let jieguo = obg.echo()
|
||||
```
|
||||
请问变量 jieguo 的值是什么，为什么
|
||||
|
||||
汪汪汪
|
||||
|
||||
箭头函数内部没有this 他的this会指向外面一层的对象，所以会从window 里取n的值 即汪汪汪
|
||||
|
||||
|
||||
|
||||
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name
|
||||
|
||||
6. function miao(name){
|
||||
|
||||
this.name=name
|
||||
|
||||
this.echo=function(){
|
||||
|
||||
return this.name
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
var mao=new Miao('本猫咪')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7. 分析下面代码的预编译过程
|
||||
|
||||
```
|
||||
var shopname='解忧杂货店';
|
||||
var auth="东野圭吾"
|
||||
function echo(){
|
||||
var say=function(){console.log("welcome")}
|
||||
age=40
|
||||
function end(){
|
||||
console.log('欢迎下次光临')
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
go:
|
||||
|
||||
1.{
|
||||
|
||||
shopname:undefined
|
||||
|
||||
auth:undefined
|
||||
|
||||
age:undefined
|
||||
|
||||
echo:undefined
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
2.{
|
||||
|
||||
shopname:"解忧杂货店"
|
||||
|
||||
auth:"东野圭吾"
|
||||
|
||||
age:40,
|
||||
|
||||
echo:undefined
|
||||
|
||||
}
|
||||
|
||||
3.{
|
||||
|
||||
shopname:"解忧杂货店"
|
||||
|
||||
auth:"东野圭吾"
|
||||
|
||||
age:40,
|
||||
|
||||
echo:function
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
AO:
|
||||
|
||||
1.{
|
||||
|
||||
pri:undefined
|
||||
|
||||
say:undefined
|
||||
|
||||
end:undefined
|
||||
|
||||
}
|
||||
|
||||
2.{
|
||||
|
||||
pri:0.0,
|
||||
|
||||
say:function(){},
|
||||
|
||||
end:undefined
|
||||
|
||||
}
|
||||
|
||||
3.
|
||||
|
||||
{
|
||||
|
||||
pri:0.0,
|
||||
|
||||
say:function(){},
|
||||
|
||||
end:function(){},
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
8. 用js创建元素的方式 画一个五环之歌
|
||||
|
||||
如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
考试/前端考试原题.assets/image-20210219130402087 - 副本.png
Normal file
BIN
考试/前端考试原题.assets/image-20210219130402087 - 副本.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
考试/前端考试原题.assets/image-20210219130402087.png
Normal file
BIN
考试/前端考试原题.assets/image-20210219130402087.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
考试/原题/javascript基础测试-运算符刚开始.docx
Normal file
BIN
考试/原题/javascript基础测试-运算符刚开始.docx
Normal file
Binary file not shown.
227
考试/原题/javascript基础测试-运算符刚开始.md
Normal file
227
考试/原题/javascript基础测试-运算符刚开始.md
Normal file
@ -0,0 +1,227 @@
|
||||
# javascript 基础测试
|
||||
|
||||
## 单选题
|
||||
1. javascript 代码需要放置在______标签之间
|
||||
A.scripe
|
||||
B.javascript
|
||||
C.script
|
||||
D.scripte
|
||||
|
||||
答案 A
|
||||
|
||||
解析 js代码需要放置在script标签之间才能被识别
|
||||
|
||||
2. script 标签可以被放置的位置是
|
||||
A.<!doctype>文档声明之后就可以
|
||||
B.boby标签内部
|
||||
C.html标签结束之后
|
||||
D.head标签内部
|
||||
|
||||
答案 D
|
||||
|
||||
解析 script标签可以放置在 head标签内或者是 body 标签内部
|
||||
|
||||
（B选项是boby标签）
|
||||
|
||||
3. 下面哪种javascript引入方式是错误的
|
||||
A.在.html文件中的body标签中创建script 标签 在script 标签中写 js代码
|
||||
B.在.js文件中写js代码， 在.html通过 ``` <link src="js文件路径"> ```
|
||||
C.在html 标签内执行js语句 如:``` <button onclick="alert()">save</button> ```
|
||||
D.在.html文件内 在head标签中创建script 标签 在script 标签中写 js代码
|
||||
|
||||
答案 B
|
||||
|
||||
解析 link标签是用来引入外部css文件的
|
||||
|
||||
1. 下面两段代码，js文件的加载顺序
|
||||
demo1:
|
||||
|
||||
```
|
||||
<script async src="js/vendor/jquery.js"></script>
|
||||
<script async src="js/script2.js"></script>
|
||||
<script async src="js/script3.js"></script>
|
||||
|
||||
```
|
||||
demo2:
|
||||
|
||||
```
|
||||
<script defer src="js/vendor/jquery.js"></script>
|
||||
<script defer src="js/script2.js"></script>
|
||||
<script defer src="js/script3.js"></script>
|
||||
|
||||
```
|
||||
A.demo1的顺序为：jquery.js, script2,script3
|
||||
demo2的顺序为：script2.js, script3.js, jquery
|
||||
B.demo1的顺序为：script2.js,script3.js,jquery.js
|
||||
demo2的顺序为：script3.js,script2.js，jquery.js
|
||||
C.demo1的顺序为：只执行script2
|
||||
demo2的顺序是 jquery.js, script2.js, script3.js
|
||||
|
||||
D.demo1的顺序是：script3.js,script2.js,jquery.js
|
||||
demo2的执行顺序是：script3.js script2.js jquery,js
|
||||
|
||||
答案：C
|
||||
|
||||
解析 引入js时 script标签中加入async后，js文件的执行顺序不确定 。但是 如果js代码报错，就会造成阻塞 即后面的js代码不执行 所以 demo1 除了jquery.js, script2.js, script3.js 这个顺序之外 其他顺序会因为报错只执行第一个
|
||||
|
||||
引入script标签中加入 defer后，js文件执行顺序确定为 文件引入的顺序
|
||||
|
||||
defer属性只支持外部引入的方式
|
||||
|
||||
|
||||
|
||||
2. 下面哪一种js注释添加方式是正确的
|
||||
A. /
|
||||
B.//
|
||||
C.\
|
||||
D.*
|
||||
|
||||
答案 B
|
||||
|
||||
js单行注释 符号是// js多行注释符号是 /* */
|
||||
|
||||
|
||||
|
||||
3. console.log()在chrome运行的结果会打印在哪里
|
||||
A. 页面上
|
||||
B.开发者工具中的sources中
|
||||
C.开发者工具中的xhr中
|
||||
D.开发者工具的console中
|
||||
|
||||
答案 D
|
||||
|
||||
解析 console.log 会打印在chrome浏览器的console板块中
|
||||
|
||||
|
||||
|
||||
4. 下面哪种JavaScript输出数据方式的表述是错的：
|
||||
|
||||
A.使用 window.alert() 弹出带输入框的警告框。
|
||||
B.使用 document.write() 方法将内容写到 HTML 文档中。
|
||||
C.使用 innerHTML 写入到 HTML 元素。
|
||||
D.使用 console.log() 写入到浏览器的控制台。
|
||||
|
||||
答案： A
|
||||
|
||||
解析 alert 弹出的警告框不包含 输入框
|
||||
|
||||
5. 下面哪个关键字能声明js变量
|
||||
A.def
|
||||
B.var
|
||||
C.数据类型+变量名=变量值
|
||||
D.变量不需要声明 直接写变量名就行
|
||||
|
||||
答案 B
|
||||
|
||||
6. 下面哪个不是js关键字
|
||||
A.abstract
|
||||
B.let
|
||||
C.import
|
||||
D.absolute
|
||||
|
||||
答案 D
|
||||
|
||||
解析 absolute是css的绝对定位
|
||||
|
||||
|
||||
|
||||
7. 下面哪个变量名符合要求
|
||||
A.shop1
|
||||
B.public
|
||||
C.point&
|
||||
D.12SY
|
||||
|
||||
答案 A
|
||||
解析：
|
||||
|
||||
|
||||
名称可包含字母、数字、下划线和美元符号
|
||||
名称必须以字母开头
|
||||
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
|
||||
名称对大小写敏感（y 和 Y 是不同的变量）
|
||||
保留字（比如 JavaScript 的关键词）无法用作变量名称
|
||||
|
||||
8. 阅读下面代码 选择运行结果
|
||||
code :
|
||||
```
|
||||
var person = "Bill ";
|
||||
var person1="Bill";
|
||||
console.log(person,person1)
|
||||
|
||||
```
|
||||
A. bill Bill
|
||||
B. BillBill
|
||||
C.BILLBILL
|
||||
D. billbill
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
9. 将 "025.5" 的string类型变量转化为 number 类型后 值是
|
||||
A.0255
|
||||
B.255
|
||||
C.25.5
|
||||
D.5.5
|
||||
|
||||
|
||||
10. 1 + ‘1aa’ 的运算结果是
|
||||
A.11aa
|
||||
B.2
|
||||
C.2aa
|
||||
D.1aa
|
||||
|
||||
11. 0 || 3 || 3 的返回结果是
|
||||
A.0
|
||||
B.3
|
||||
C.true
|
||||
D.1
|
||||
12. 1 && 0 && 5 的返回结果是
|
||||
A.0
|
||||
B.1
|
||||
C.true
|
||||
D.5
|
||||
## 填空题
|
||||
1. 什么是字面量 常见的字面量有__ , __ , __ , __ , __ , __
|
||||
|
||||
答案：字面量（literal）用于表达源代码中一个固定值的表示法（notation）
|
||||
字符串自变量 整数字面量 浮点数字面量 布尔字面量 数组字面量 对象字面量
|
||||
|
||||
2. 运算符的优先级
|
||||
3. js基本数据类型和引用数据类型的区别是__________
|
||||
4. 外部引入js文件的优势是
|
||||
5. 在html中 javascript语句是由 "执行"的"指令"
|
||||
6. javascript语句由 ， ， ， 构成
|
||||
7. 分割javascript语句
|
||||
8. 阅读下面代码 写出运行结果
|
||||
code :
|
||||
|
||||
```
|
||||
typeof "John"
|
||||
typeof 3.14
|
||||
typeof NaN
|
||||
typeof false
|
||||
typeof [1,2,3,4]
|
||||
typeof {name:'John', age:34}
|
||||
typeof new Date()
|
||||
typeof function () {}
|
||||
typeof myCar // (如果 myCar 没有声明)
|
||||
typeof null
|
||||
```
|
||||
答案：
|
||||
```
|
||||
typeof "John" // 返回 string
|
||||
typeof 3.14 // 返回 number
|
||||
typeof NaN // 返回 number
|
||||
typeof false // 返回 boolean
|
||||
typeof [1,2,3,4] // 返回 object
|
||||
typeof {name:'John', age:34} // 返回 object
|
||||
typeof new Date() // 返回 object
|
||||
typeof function () {} // 返回 function
|
||||
typeof myCar // 返回 undefined (如果 myCar 没有声明)
|
||||
typeof null // 返回 object
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
191
考试/原题/前端js综合水平测试.md
Normal file
191
考试/原题/前端js综合水平测试.md
Normal file
@ -0,0 +1,191 @@
|
||||
# web前端javascript综合水平测试
|
||||
|
||||
## 填空
|
||||
1. javascript 由 ， ， ，三部分组成，简单介绍一下这三部分
|
||||
2. 检测数据类型的方式有 ， ， ， 三种方式什么区别
|
||||
3. 检测NaN的数据类型结果为
|
||||
4. js中 对象转json的方法为 ， json格式转对象的方法为
|
||||
5. js 浏览器对象模型包括 ， ， ， ， ，五部份 分别介绍一下这5部分
|
||||
6. var a=1;console.log(a++) 运行的结果为：
|
||||
7. js运算符的优先级
|
||||
8. js设置属性和属性值的方法为
|
||||
9. 五大主流浏览器及内核
|
||||
10. jq ajax基本结构及解释
|
||||
11. 本地缓存的增删改查
|
||||
12. jq选择器列举
|
||||
|
||||
## 指出下面代码运行结果并分析其执行过程
|
||||
|
||||
1 .
|
||||
```
|
||||
function a(n) {
|
||||
if (n <= 1) {
|
||||
return 1
|
||||
} else {
|
||||
return n * a(n - 1)
|
||||
}
|
||||
}
|
||||
console.log(a(5))
|
||||
|
||||
var cheng=a
|
||||
a=null
|
||||
console.log(cheng(5))
|
||||
|
||||
```
|
||||
2
|
||||
|
||||
```
|
||||
function C1(name) {
|
||||
if (name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
function C2(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
function C3(name) {
|
||||
this.name = name || 'join';
|
||||
}
|
||||
C1.prototype.name = 'Tom';
|
||||
C2.prototype.name = 'Tom';
|
||||
C3.prototype.name = 'Tom';
|
||||
alert((new C1().name) + (new C2().name) + (new C3().name));
|
||||
|
||||
```
|
||||
|
||||
3
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
var obj={user:"momo"}
|
||||
return {};
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user);
|
||||
|
||||
```
|
||||
|
||||
4
|
||||
|
||||
```
|
||||
window.color = 'red';
|
||||
document.color = 'yellow';
|
||||
|
||||
var s1 = {color: 'blue' };
|
||||
function changeColor(){
|
||||
console.log(this.color);
|
||||
}
|
||||
|
||||
changeColor.call();
|
||||
changeColor.call(window);
|
||||
changeColor.call(document);
|
||||
changeColor.call(this);
|
||||
changeColor.call(s1);
|
||||
|
||||
|
||||
```
|
||||
|
||||
## 简答题
|
||||
1. 说明call,apply,bind 的区别几个
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. js的typeof的返回值有哪些
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 说出数组相关的几个方法并说明作用
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. ajax请求时的get、post的区别
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 如何阻止浏览器的默认事件
|
||||
|
||||
|
||||
|
||||
|
||||
6. 如何阻止事件冒泡
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7. == 和===的区别
|
||||
|
||||
|
||||
|
||||
|
||||
8. 局部变量和全局变量的区别
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 通过代码实现下面要求
|
||||
1. 通过原型链实现对象继承
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. js手动实现 jq的链式操作
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 实现一个打点计时器，要求
|
||||
1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1（start 和end为用户输入）
|
||||
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 在页面上将下面的json数据，需要放到表格里
|
||||
json数据为：
|
||||
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
|
||||
|
||||
注： title对应文章标题，auth 对应的是作者 ， contnet对应的是简介 date对应的是日期
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6. 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
|
||||
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
|
||||
2、如果 num 能被 3 整除，返回字符串 fizz
|
||||
3、如果 num 能被 5 整除，返回字符串 buzz
|
||||
4、如果参数为空或者不是 Number 类型，返回 false
|
||||
5、其余情况，返回参数 num
|
||||
157
考试/原题/前端js阶段性测试原题.md
Normal file
157
考试/原题/前端js阶段性测试原题.md
Normal file
@ -0,0 +1,157 @@
|
||||
# 考试题目
|
||||
|
||||
## 填空
|
||||
1. js变量类型一共有 种，分别是哪些
|
||||
2. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么?
|
||||
3. 1 + ‘1’ 的运算结果是
|
||||
4. 0 || 3 的返回结果是
|
||||
5. 1 && 5 的返回结果是
|
||||
6. 三种数据类型检测的方法
|
||||
7. js选中dom元素的几种方式 至少5种
|
||||
8. jq选择器 至少5种(含组合型选择器) 并附上说明
|
||||
|
||||
## 简答
|
||||
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 有下面一段代码 请写出答案
|
||||
```javascript
|
||||
let obg = {
|
||||
name:"啦啦啦",
|
||||
age:18
|
||||
};
|
||||
function func(o){
|
||||
o.name = 123
|
||||
}
|
||||
func(obg);
|
||||
|
||||
```
|
||||
执行完之后obg的值是什么， 为什么
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 有下面一段代码 请写出答案
|
||||
```javascript
|
||||
let n = "喵喵喵"
|
||||
window.n = "汪汪汪"
|
||||
let obg = {
|
||||
n:"啦啦啦",
|
||||
echo: ()=> {
|
||||
return this.n;
|
||||
}
|
||||
}
|
||||
let jieguo = obg.echo()
|
||||
```
|
||||
请问变量 jieguo 的值是什么，为什么
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7. 分析下面代码的预编译过程
|
||||
|
||||
```
|
||||
var shopname='解忧杂货店';
|
||||
var auth="东野圭吾"
|
||||
function echo(){
|
||||
var say=function(){console.log("welcome")}
|
||||
age=40
|
||||
function end(){
|
||||
console.log('欢迎下次光临')
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
8. 用js创建元素的方式 画一个五环之歌
|
||||
|
||||
如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
考试/原题/前端js阶段性测验 .docx
Normal file
BIN
考试/原题/前端js阶段性测验 .docx
Normal file
Binary file not shown.
165
考试/原题/前端js阶段性测验 .md
Normal file
165
考试/原题/前端js阶段性测验 .md
Normal file
@ -0,0 +1,165 @@
|
||||
# 考试题目
|
||||
|
||||
## 填空
|
||||
1. js由几部分组成 分别是
|
||||
2. js数据类型中，原始值与引用值的区别为
|
||||
3. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么?
|
||||
4. 1 + ‘1aa’ 的运算结果是
|
||||
5. 0 || 3 || 3 的返回结果是
|
||||
6. 1 && 0 && 5 的返回结果是
|
||||
7. 三种数据类型检测的方法
|
||||
8. typeof 的返回值有
|
||||
9. 列举几个与页面交互的函数
|
||||
10. 列举操作数组的常用方法
|
||||
## 简答
|
||||
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，
|
||||
加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，
|
||||
第二位和第三位交换，请编写一个函数，传入原文，输出密文
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 写一个函数实现传入一个数组返回冒泡排序后的结果
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6. 读代码 写出执行结果 并且分析原因
|
||||
|
||||
```
|
||||
const pri=10
|
||||
pri=8(pri)
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
var num=0
|
||||
num++
|
||||
console.log(++num)
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
var echo=function(e){
|
||||
console.log("传入的值为"+e)
|
||||
return
|
||||
console.log("echo")
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
var a=0
|
||||
while(a<5){
|
||||
console.log(true)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
function say(){
|
||||
console.log(hello)
|
||||
return
|
||||
}
|
||||
var word=say()
|
||||
console.log(word)
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
512
考试/完成情况/前端js综合水平测试.md
Normal file
512
考试/完成情况/前端js综合水平测试.md
Normal file
@ -0,0 +1,512 @@
|
||||
# web前端javascript综合水平测试 178
|
||||
|
||||
## 填空
|
||||
1. javascript 由 ECMAscript ， DOM ， BOM ，三部分组成，简单介绍一下这三部分 5
|
||||
|
||||
ECMAscript: javascript的语言规范， 包括：语法，类型，语句等等
|
||||
|
||||
DOM：文档对象模型，指的是html页面上的标签
|
||||
|
||||
BOM ：即浏览器对象模型，是浏览器提供的接口
|
||||
|
||||
2. 检测数据类型的方式有 typeof ， instanceof ， Object.prototype.toString.call() ， 三种方式什么区别 4
|
||||
|
||||
typeof: 原始值数据类型直接返回（null返回Object） , 引用值除了function 返回的是function 其他的引用值返回的是 object
|
||||
|
||||
instanceof :能检测引用值，原始值不行
|
||||
|
||||
Object.prototype.toString.call() 都可以检测
|
||||
|
||||
3. 检测NaN的数据类型结果为 [object Number] 5
|
||||
|
||||
4. js中 对象转json的方法为 JSON.stringify() ， json格式转对象的方法为 JSON.parse() 5
|
||||
|
||||
5. js 浏览器对象模型包括 window ， location ， screen ， navigator ， history ，五部份 分别介绍一下这5部分 5
|
||||
|
||||
window: 浏览器的窗口
|
||||
|
||||
location:浏览器当前url信息
|
||||
|
||||
screen:客户端屏幕信息
|
||||
|
||||
navigator:浏览器本身信息
|
||||
|
||||
history:记录历史信息
|
||||
|
||||
6. var a=1;console.log(a++) 运行的结果为： 1 5
|
||||
|
||||
js运算符的优先级 优先级从高到低依次是：（）; 一元加减 ;求幂 ; *，/ ; +,- ; = ; 4
|
||||
|
||||
7. js设置属性和属性值的方法为： object.setAttribute(attribute,value) 5
|
||||
|
||||
8. 五大主流浏览器及内核 Chrome:Webkit/blink; Safari:Webkit; IE:trident; FireFox:gecko; Opera: presto 5
|
||||
|
||||
9. jq ajax基本结构及解释 5
|
||||
|
||||
$.ajax({
|
||||
url: "address", // 网络地址
|
||||
data:obj, //传输数据
|
||||
type:"GET", //传输方法
|
||||
dataType:"json", //数据类型
|
||||
success: function (res) { //成功返回的函数方法
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
|
||||
10. 本地缓存的增删改查 5
|
||||
|
||||
增：localStorage.setItem(key, obj)；
|
||||
|
||||
删：localStorage.removeItem(key);
|
||||
|
||||
改：localStorage.setItem(key, obj)；
|
||||
|
||||
查：localStorage.getItem(key);
|
||||
|
||||
11. jq选择器列举 4
|
||||
|
||||
$(".class") $("p") $("#id") $("ul li:first") $("p[target = "xxx"]")
|
||||
## 指出下面代码运行结果并分析其执行过程
|
||||
|
||||
1 . 10
|
||||
|
||||
```
|
||||
function a(n) {
|
||||
if (n <= 1) {
|
||||
return 1
|
||||
} else {
|
||||
return n * a(n - 1)
|
||||
}
|
||||
}
|
||||
console.log(a(5)) //120 调用a函数递归5*4*3*2*1=120
|
||||
|
||||
var cheng=a //把函数a赋给cheng
|
||||
a=null //a的值改为null
|
||||
console.log(cheng(5)) //执行cheng时return的a找不到，故错误Error: a is not a function
|
||||
|
||||
```
|
||||
2 10
|
||||
|
||||
```
|
||||
function C1(name) {
|
||||
if (name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
function C2(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
function C3(name) {
|
||||
this.name = name || 'join';
|
||||
}
|
||||
//c1/2/3的原型的name为tom
|
||||
C1.prototype.name = 'Tom';//调用时没有name传值，if里的语句不调用，故找原型的name为tom
|
||||
C2.prototype.name = 'Tom';//调用时没有name传值，故this.name为undefined
|
||||
C3.prototype.name = 'Tom';//调用时没有name传值，故name为false||'join'这个true，||返回第一个真值，故this.name为join
|
||||
alert((new C1().name) + (new C2().name) + (new C3().name));
|
||||
//Tomundefinedjoin
|
||||
```
|
||||
|
||||
3 10
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
var obj={user:"momo"}
|
||||
return {};
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user); //undefined
|
||||
//构造函数中的this与被创建的新对象a绑定，当函数return的值为对象时，this就指向这个被return的对象，对象里为空故.user为undefined
|
||||
|
||||
```
|
||||
|
||||
4 10
|
||||
|
||||
```
|
||||
window.color = 'red';
|
||||
document.color = 'yellow';
|
||||
|
||||
var s1 = {color: 'blue' };
|
||||
function changeColor(){
|
||||
console.log(this.color);
|
||||
}
|
||||
|
||||
changeColor.call(); //red 默认window借用changeColor方法输出this.color及window的颜色red
|
||||
changeColor.call(window); //red 同上
|
||||
changeColor.call(document); //yellow document借用changeColor方法输出document.color及document的颜色yellow
|
||||
changeColor.call(this); //red this默认是window的故同window
|
||||
changeColor.call(s1); //blue s1借用changeColor方法输出s1.color及s1的颜色blue
|
||||
|
||||
|
||||
```
|
||||
|
||||
## 简答题
|
||||
1. 说明call,apply,bind 的区别几个 10
|
||||
|
||||
call参数一个个传参；
|
||||
|
||||
apply 参数放到一个数组传参；
|
||||
|
||||
bind是返回对应函数，便于稍后调用，apply、call是立即调用；
|
||||
|
||||
|
||||
2. js的typeof的返回值有哪些 10
|
||||
|
||||
number, boolean, string, undefined, object, function,
|
||||
|
||||
3. 说出数组相关的几个方法并说明作用 6
|
||||
|
||||
push() 在末端添加项 pop() 从末端移除并返回该元素
|
||||
|
||||
shift() 从首端移除并返回该元素 unshift() 从首端添加项
|
||||
|
||||
splice(p, d, items) —— 从p开始删除d个元素，并插入 items
|
||||
|
||||
4. ajax请求时的get、post的区别 5
|
||||
|
||||
使用Get请求时,参数在URL中显示, 发送数据量小 ,不安全
|
||||
|
||||
使用Get请求时,参数不会在URL中显示, 发送数据量大 ,安全
|
||||
|
||||
5. 如何阻止浏览器的默认事件 5
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
6. 如何阻止事件冒泡 5
|
||||
|
||||
event.stopPropagation();
|
||||
|
||||
7. == 和===的区别 5
|
||||
|
||||
===比较类型和值，==只比较值
|
||||
|
||||
8. 局部变量和全局变量的区别 10
|
||||
|
||||
1. 作用域不同：全局作用域为整个程序，而局部为当前函数或循环等
|
||||
|
||||
2. 内存存储方式不同：全局存储在全局数据区中，局部存储在栈区
|
||||
|
||||
3. 生命期不同：全局的生命期随主程序的销毁而销毁，局部随函数或循环退出就销毁
|
||||
|
||||
4. 使用方式不同：全局声明后程序的各个部分都可以用到，局部只能在局部使用。
|
||||
|
||||
|
||||
|
||||
## 通过代码实现下面要求
|
||||
1. 通过原型链实现对象继承 10
|
||||
|
||||
**function** Parent(p) {
|
||||
|
||||
|
||||
|
||||
this.p = p;
|
||||
|
||||
this.psay = **function** () {
|
||||
|
||||
console.log("Parent:"+p);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
**function** Child(c) {
|
||||
|
||||
**var** c = c;
|
||||
|
||||
this.csay = **function** () {
|
||||
|
||||
console.log("childName: "+c)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
**function** GrandChild(g) {
|
||||
|
||||
this.g = g;
|
||||
|
||||
this.gsay = **function** () {
|
||||
|
||||
console.log("grandChildName :"+ this.g);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
**let** parent = new Parent();
|
||||
|
||||
Child.prototype = parent;
|
||||
|
||||
**let** child = new Child();
|
||||
|
||||
GrandChild.prototype = child;
|
||||
|
||||
**let** grandchild = new GrandChild();
|
||||
|
||||
|
||||
|
||||
|
||||
2. js手动实现 jq的链式操作 10
|
||||
|
||||
function Person(){};
|
||||
|
||||
Person.prototype ={
|
||||
|
||||
setName:function(name){
|
||||
|
||||
this.name = name;
|
||||
|
||||
return this;
|
||||
|
||||
},
|
||||
|
||||
setAge:function(age){
|
||||
|
||||
this.age = age;
|
||||
|
||||
return this;
|
||||
|
||||
},
|
||||
|
||||
setSex:function(sex){
|
||||
|
||||
this.sex = sex;
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var Person= new Person(); Person.setName("Tom").setAge(24).setSex("male");
|
||||
|
||||
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算 10
|
||||
|
||||
<body>
|
||||
|
||||
<input type="text" name="text" id="pre" >
|
||||
|
||||
<select id="operator">
|
||||
|
||||
<option value="+">+</option>
|
||||
|
||||
<option value="-">-</option>
|
||||
|
||||
<option value="*">*</option>
|
||||
|
||||
<option value="/">/</option>
|
||||
|
||||
</select>
|
||||
|
||||
<input type="text" name="text" id="next" >
|
||||
|
||||
<span>=</span>
|
||||
|
||||
<input type="text" id="result" readonly="true">
|
||||
|
||||
<input type="button" id="btn" value="提交" onclick="calculator();">
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
**function** calculator(){
|
||||
|
||||
**var** pre=document.getElementById("pre").value;
|
||||
|
||||
**var** next=document.getElementById("next").value;
|
||||
|
||||
**var** opra=document.getElementById("operator").value;
|
||||
|
||||
|
||||
|
||||
**var** result=0;
|
||||
|
||||
switch(opra) {
|
||||
|
||||
case "+":
|
||||
|
||||
result=parseFloat(pre)+parseFloat(next);
|
||||
|
||||
break;
|
||||
|
||||
case "-":
|
||||
|
||||
result=parseFloat(pre)-parseFloat(next);
|
||||
|
||||
break;
|
||||
|
||||
case "*":
|
||||
|
||||
result=parseFloat(pre)*parseFloat(next);
|
||||
|
||||
break;
|
||||
|
||||
case "/":
|
||||
|
||||
if(parseFloat(next)!=0){
|
||||
|
||||
result=parseFloat(pre)/parseFloat(next);
|
||||
|
||||
}
|
||||
|
||||
else{
|
||||
|
||||
alert("除数不能为0");
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("result").value=result;
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
4. 实现一个打点计时器，要求
|
||||
1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1（start 和end为用户输入）
|
||||
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
|
||||
|
||||
start = prompt('输入一个数从它开始到逐渐加一');
|
||||
|
||||
end = prompt('一直加到几为止');
|
||||
|
||||
count(start,end);
|
||||
|
||||
**function** count(start, end) {
|
||||
|
||||
console.log(start);
|
||||
|
||||
**var** temp=setInterval(**function**(){
|
||||
|
||||
if(start<end){
|
||||
|
||||
console.log(++start);
|
||||
|
||||
}
|
||||
|
||||
else{
|
||||
|
||||
clearInterval(temp);
|
||||
|
||||
}
|
||||
|
||||
},1000);
|
||||
|
||||
return {
|
||||
|
||||
cancel:**function**(){
|
||||
|
||||
clearInterval(temp);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
5. 在页面上将下面的json数据，需要放到表格里
|
||||
json数据为：
|
||||
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
|
||||
|
||||
注： title对应文章标题，auth 对应的是作者 ， contnet对应的是简介 date对应的是日期
|
||||
|
||||
|
||||
|
||||
**var** stu = [
|
||||
|
||||
{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
||||
|
||||
{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
||||
|
||||
{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
||||
|
||||
{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
||||
|
||||
{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"}
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
<table border="1px" id="tab">
|
||||
<tr>
|
||||
<th>文章标题</th>
|
||||
<th>作者</th>
|
||||
<th>简介</th>
|
||||
<th>日期</th>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
$(document).ready(**function**() {
|
||||
|
||||
**var** s = "";
|
||||
|
||||
for(**var** i = 0; i < stu.length; i++) {
|
||||
|
||||
s = "<tr><td>" + stu[i].title + "</td><td>" + stu[i].auth + "</td><td>" +
|
||||
|
||||
stu[i].content + "</td><td>" + stu[i].date + "</td></tr>";
|
||||
|
||||
$("#tab").append(s);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6. 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
|
||||
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
|
||||
2、如果 num 能被 3 整除，返回字符串 fizz
|
||||
3、如果 num 能被 5 整除，返回字符串 buzz
|
||||
4、如果参数为空或者不是 Number 类型，返回 false
|
||||
5、其余情况，返回参数 num
|
||||
|
||||
**function** fizzBuzz(num) {
|
||||
|
||||
if(num%3==0&&num%5==0){
|
||||
|
||||
return "fizzbuzz";
|
||||
|
||||
}else if(num%3==0){
|
||||
|
||||
return "fizz";
|
||||
|
||||
}else if(num%5==0){
|
||||
|
||||
return "buzz";
|
||||
|
||||
}else if(typeof(num)!="number"){
|
||||
|
||||
return false;
|
||||
|
||||
}else{
|
||||
|
||||
return num;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
222
考试/完成情况/前端考试成绩.md
Normal file
222
考试/完成情况/前端考试成绩.md
Normal file
@ -0,0 +1,222 @@
|
||||
# 考试题目
|
||||
<font color="red">77</font>
|
||||
## 填空
|
||||
1. js变量类型一共有 7 种，分别是哪些 boolean string undefined null bigint number symbol <font color="red">3</font>
|
||||
2. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么? 25.5 <font color="red">5</font>
|
||||
3. 1 + ‘1’ 的运算结果是 11 <font color="red">5</font>
|
||||
4. 0 || 3 的返回结果是 3 <font color="red">5</font>
|
||||
5. 1 && 5 的返回结果是 5 <font color="red">5</font>
|
||||
6. 三种数据类型检测的方法 typeof， instance of ，object.prototype.toString.call()
|
||||
<font color="red">3</font>
|
||||
## 简答
|
||||
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和。<font color="red">10</font>
|
||||
|
||||
let num = [1,2,4,8,32];
|
||||
|
||||
let sum = 0;
|
||||
|
||||
for (let i=0;i<num.length;i++) {
|
||||
|
||||
sum += num[i];
|
||||
|
||||
}
|
||||
|
||||
alert(sum);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加) <font color="red">10</font>
|
||||
|
||||
let s = 0;
|
||||
|
||||
function sum(n){
|
||||
|
||||
for (let i=1;i<=n;i++) {
|
||||
|
||||
s += i;
|
||||
|
||||
}
|
||||
|
||||
alert(s);
|
||||
|
||||
}
|
||||
|
||||
sum(3);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0 <font color="red">10</font>
|
||||
|
||||
function odd(n){
|
||||
|
||||
if (n%2==0) {
|
||||
|
||||
return 1;
|
||||
|
||||
}
|
||||
|
||||
else { return 0; }
|
||||
|
||||
}
|
||||
|
||||
odd(3);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 有下面一段代码 请写出答案 <font color="red">8</font>
|
||||
```javascript
|
||||
let obg = {
|
||||
name:"啦啦啦",
|
||||
age:18
|
||||
};
|
||||
function func(o){
|
||||
o.name = 123
|
||||
}
|
||||
func(obg);
|
||||
|
||||
```
|
||||
执行完之后obg的值是什么， 为什么
|
||||
|
||||
obg {
|
||||
name:123,
|
||||
age:18
|
||||
};
|
||||
|
||||
函数把obj当做参数传入并改变了obj的name属性
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 有下面一段代码 请写出答案 <font color="red">10</font>
|
||||
```javascript
|
||||
let n = "喵喵喵"
|
||||
window.n = "汪汪汪"
|
||||
let obg = {
|
||||
n:"啦啦啦",
|
||||
echo: ()=> {
|
||||
return this.n;
|
||||
}
|
||||
}
|
||||
let jieguo = obg.echo()
|
||||
```
|
||||
请问变量 jieguo 的值是什么，为什么
|
||||
|
||||
汪汪汪
|
||||
|
||||
jiegou调用obg的echo方法，由于echo是箭头函数不能调用对象内的n：啦啦啦，只能调用对象外一层的n，对象外一层的n 先定义为喵喵喵后改为汪汪汪，所以jiegou的值为汪汪汪
|
||||
|
||||
|
||||
|
||||
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name <font color="red">3</font>
|
||||
|
||||
function Fn（name）{
|
||||
|
||||
this.name = name;
|
||||
|
||||
echo(name){
|
||||
|
||||
return "name";
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let fn = new Fn("LiMing");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7. 分析下面代码的预编译过程 <font color="red">5</font>
|
||||
|
||||
```
|
||||
var shopname='解忧杂货店';
|
||||
var auth="东野圭吾"
|
||||
function echo(){
|
||||
var say=function(){console.log("welcome")}
|
||||
age=40
|
||||
function end(){
|
||||
console.log('欢迎下次光临')
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
GO: 1.先找到变量和函数声明 找到 shopname auth echo()
|
||||
|
||||
2.执行过程中给变量赋值 var shopname='解忧杂货店'； var auth="东野圭吾"
|
||||
|
||||
3.执行过程中给函数赋函数体 function echo(){ ...}
|
||||
|
||||
4.执行
|
||||
|
||||
AO ：1.在函数体内部先找到变量和形参 找到say
|
||||
|
||||
2.执行过程中形参和实参相统一，并且给函数表达式赋值
|
||||
|
||||
var say=function(){console.log("welcome")}
|
||||
|
||||
3.执行过程中寻找函数声明并给函数赋函数体
|
||||
|
||||
function end(){console.log('欢迎下次光临')}
|
||||
|
||||
4.执行
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
326
考试/答案/前端js综合水平测试答案.md
Normal file
326
考试/答案/前端js综合水平测试答案.md
Normal file
@ -0,0 +1,326 @@
|
||||
# web前端javascript综合水平测试
|
||||
|
||||
## 填空
|
||||
1. javascript 由 ECMAscript，DOM ，BOM ，三部分组成，简单介绍一下这三部分
|
||||
|
||||
ECMAscript :javascript 的核心，描述了js基本语法和数据类型，是一套 标准
|
||||
|
||||
DOM: 文档对象模型，dom通过节点树来创建文档，使开发者对文档节点控制力提高
|
||||
|
||||
BOM: 对浏览器窗口的访问和操作
|
||||
|
||||
2. 检测数据类型的方式有 typeof ，instanceof ， Object.prototype.toString.call() ， 三种方式什么区别
|
||||
|
||||
区别：typeof 可以对JS基本数据类型做出准确的判断（除了null），而对于引用类型返回的基本上都是objec
|
||||
|
||||
instanceof判断对象和构造函数在原型链上是否有联系，如果有返回true 没有返回false
|
||||
|
||||
toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString运行时this指向的对象类型, 返回的类型
|
||||
|
||||
格式为[object xxx],xxx是具体的数据类型
|
||||
|
||||
|
||||
|
||||
3. 检测NaN的数据类型结果为 number
|
||||
|
||||
4. js中 对象转json的方法为 JSON.stringfy() ， json格式转对象的方法为 JSON.parse()
|
||||
|
||||
5. js 浏览器对象模型包括 window ，location ，navigator ，history ，screen ，五部份 分别介绍一下这5部分
|
||||
|
||||
window 全局作用域
|
||||
|
||||
location 对窗口url的信息
|
||||
|
||||
navigator 提供浏览器信息
|
||||
|
||||
history 提供历史访问记录
|
||||
|
||||
screen 用户显示器相关信息
|
||||
|
||||
6. var a=1;console.log(a++) 运行的结果为： 1
|
||||
|
||||
7. js运算符的优先级 从高到低为： () > .,[] 函数调用() > 后置递增（a++）后置递减（a--）>逻辑非 ! + - 前置递增(++a) 前置递减(--a) typeof > * / % > - + > 小于 (<) 小于等于(<=) 大于(>) 大于等于(>=) in instanceof >等于(==) 非等于(!=) 全等(= = =) 非全等（!= =）>&& || >?: >赋值相关>，
|
||||
|
||||
8. js设置属性和属性值的方法为 setattribute()
|
||||
|
||||
9. 五大主流浏览器及内核
|
||||
|
||||
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
|
||||
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
|
||||
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
|
||||
4、Safari浏览器内核：Webkit内核；
|
||||
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核
|
||||
|
||||
10. jq ajax基本结构及解释
|
||||
|
||||
$.ajax({
|
||||
|
||||
url:"" 请求地址
|
||||
|
||||
type:"" 请求方式
|
||||
|
||||
datatype:"" 后台返回的数据格式
|
||||
|
||||
success 回调函数
|
||||
|
||||
})
|
||||
|
||||
11. 本地缓存的增删改查
|
||||
|
||||
localstorage.setitem()
|
||||
|
||||
localstorage.getitem()
|
||||
|
||||
localstorage.clear()
|
||||
|
||||
localstorage.removeitem()
|
||||
|
||||
12. jq选择器列举
|
||||
|
||||
```
|
||||
$("#id") $(".class") $("标签") $([属性]) $(A,B) ...
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 指出下面代码运行结果并分析其执行过程
|
||||
|
||||
1 .
|
||||
```
|
||||
function a(n) {
|
||||
if (n <= 1) {
|
||||
return 1
|
||||
} else {
|
||||
return n * a(n - 1)
|
||||
}
|
||||
}
|
||||
console.log(a(5))
|
||||
|
||||
var cheng=a
|
||||
a=null
|
||||
console.log(cheng(5))
|
||||
|
||||
```
|
||||
报错 cheng is not a function
|
||||
|
||||
a是个递归函数 ，cheng 等于a 执行到内部的时候会调用a(5-1) 但是这时候a 已经被赋值成null了
|
||||
|
||||
2
|
||||
|
||||
```
|
||||
function C1(name) {
|
||||
if (name) {
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
function C2(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
function C3(name) {
|
||||
this.name = name || 'join';
|
||||
}
|
||||
C1.prototype.name = 'Tom';
|
||||
C2.prototype.name = 'Tom';
|
||||
C3.prototype.name = 'Tom';
|
||||
alert((new C1().name) + (new C2().name) + (new C3().name));
|
||||
|
||||
```
|
||||
|
||||
Tomundefinedjoin
|
||||
|
||||
new c1 this指向 c1的实例对象，没有传参就不执行 this.name的赋值 所以 取name的时候要从原型中取 即tom
|
||||
|
||||
c2 new的时候传得值为空 但是没有判断过直接赋值 所以 c2函数中的 this.name 就直接被赋值成了 undefined
|
||||
|
||||
c3函数中赋值的时候 判断了name参数是否为空 如果为空的话就赋成默认值 join
|
||||
|
||||
|
||||
|
||||
3
|
||||
|
||||
```
|
||||
function fn()
|
||||
{
|
||||
this.user = '追梦子';
|
||||
var obj={user:"momo"}
|
||||
return {};
|
||||
}
|
||||
var a = new fn;
|
||||
console.log(a.user);
|
||||
|
||||
```
|
||||
|
||||
undefined
|
||||
|
||||
new fn 的时候生成 的实例是fn的返回值 也就是{} 空对象
|
||||
|
||||
从空对象中找不到 a.user的值
|
||||
|
||||
4
|
||||
|
||||
```
|
||||
window.color = 'red';
|
||||
document.color = 'yellow';
|
||||
|
||||
var s1 = {color: 'blue' };
|
||||
function changeColor(){
|
||||
console.log(this.color);
|
||||
}
|
||||
|
||||
changeColor.call();
|
||||
changeColor.call(window);
|
||||
changeColor.call(document);
|
||||
changeColor.call(this);
|
||||
changeColor.call(s1);
|
||||
|
||||
|
||||
```
|
||||
|
||||
red
|
||||
|
||||
red
|
||||
|
||||
yellow
|
||||
|
||||
red
|
||||
|
||||
blue
|
||||
|
||||
|
||||
|
||||
call() 不加参数的时候 this指向window，其他的参数是谁就指向谁
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 简答题
|
||||
|
||||
1. 说明call,apply,bind 的区别
|
||||
|
||||
bind 不会立即调用 而是返回一个新函数
|
||||
|
||||
call/apply 会立即调用 返回的是函数调用后的结果
|
||||
|
||||
call 传参数的时候 函数需要的参数可以一个一个传
|
||||
|
||||
apply 函数需要的参数只能写成类数组的形式 [a,b,c]
|
||||
|
||||
|
||||
|
||||
|
||||
2. js的typeof的返回值有哪些
|
||||
|
||||
number, boolean, string, undefined, object, function,symbol.
|
||||
|
||||
|
||||
|
||||
3. 说出数组相关的几个方法并说明作用
|
||||
|
||||
push() 向数组最后面添加一个元素
|
||||
|
||||
pop() 删除数组最后面的元素 并返回这个被删除的值
|
||||
|
||||
shift() 删除第一个元素
|
||||
|
||||
unshift() 向数组开头添加一个元素
|
||||
|
||||
...
|
||||
|
||||
4. ajax请求时的get、post的区别
|
||||
|
||||
AJAX GET和POST的区别
|
||||
|
||||
**ajax** 请求的时候**get 和post** 方式的**区别**? **GET**请求会将参数跟在URL后进行传递，而**POST**请求则是作为HTTP消息的实体内容发送给WEB服务器。 **GET**请求有数据长度限制，而**POST**没有。 **GET**方式请求的数据会被浏览器缓存起来，**POST**没有
|
||||
|
||||
|
||||
|
||||
5. 如何阻止浏览器的默认事件
|
||||
|
||||
```
|
||||
event.preventDefault()
|
||||
或 return false
|
||||
```
|
||||
|
||||
|
||||
6. 如何阻止事件冒泡
|
||||
|
||||
```
|
||||
event.preventDefault()
|
||||
或return false
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
7. == 和===的区别
|
||||
|
||||
== 只比较数值大小 不比较数据类型 会发生隐式类型转换
|
||||
|
||||
=== 不发生类型转换 会比较数据类型
|
||||
|
||||
|
||||
8. 局部变量和全局变量的区别
|
||||
|
||||
全局变量是整个程序都可访问的变量，生存期从程序开始到程序结束；局部变量存在于模块中(比如某个函数)，只有在模块中才可以访问，生存期从模块开始到模块结束。
|
||||
全局变量分配在全局数据段，在程序开始运行的时候被加载。局部变量则分配在程序的堆栈中。因此，操作系统和编译器可以通过内存分配的位置来知道来区分全局变量和局部变量。
|
||||
|
||||
|
||||
|
||||
## 通过代码实现下面要求（略）
|
||||
1. 通过原型链实现对象继承
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2. js手动实现 jq的链式操作
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 实现一个打点计时器，要求
|
||||
1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1（start 和end为用户输入）
|
||||
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 在页面上将下面的json数据，需要放到表格里
|
||||
json数据为：
|
||||
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
|
||||
|
||||
注： title对应文章标题，auth 对应的是作者 ， contnet对应的是简介 date对应的是日期
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
6. 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
|
||||
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
|
||||
2、如果 num 能被 3 整除，返回字符串 fizz
|
||||
3、如果 num 能被 5 整除，返回字符串 buzz
|
||||
4、如果参数为空或者不是 Number 类型，返回 false
|
||||
5、其余情况，返回参数 num
|
||||
251
考试/答案/前端js阶段性测试答案.md
Normal file
251
考试/答案/前端js阶段性测试答案.md
Normal file
@ -0,0 +1,251 @@
|
||||
# 考试题目
|
||||
|
||||
## 填空
|
||||
1. js变量类型一共有 2 种，分别是哪些
|
||||
|
||||
原始值和引用值
|
||||
|
||||
原始值 number string boolean undefined nll
|
||||
|
||||
引用值 object
|
||||
|
||||
|
||||
|
||||
3. 将 "025.5" 的string类型变量转化为 number 类型后 值是什么? 25.5
|
||||
|
||||
4. 1 + ‘1’ 的运算结果是 11
|
||||
|
||||
5. 0 || 3 的返回结果是 3
|
||||
|
||||
6. 1 && 5 的返回结果是 5
|
||||
|
||||
7. 三种数据类型检测的方法 typeof instanceof **Object.prototype.toString.call**
|
||||
|
||||
## 简答
|
||||
1. 定义一个数组[1,2,4,8,32] 计算所有数组元素的总和 最后把数组元素的总和写在页面上。
|
||||
|
||||
var arr=[1,2,4,8,32]
|
||||
|
||||
var sum=0
|
||||
|
||||
for(let i in arr){
|
||||
|
||||
sum+=arr[i]
|
||||
|
||||
}
|
||||
|
||||
document.write(sum)
|
||||
|
||||
2. 定义一个方法 接受一个参数 计算从1 到传入数字的总和(累加) 并返回总和
|
||||
|
||||
|
||||
|
||||
function add(e){
|
||||
|
||||
var sum=0
|
||||
|
||||
for(let i=1;i<=e;i++){
|
||||
|
||||
sum+=i
|
||||
|
||||
}
|
||||
|
||||
return sum
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3. 定义一个方法 接受一个参数 返回传入的参数是不是偶数 偶数返回 1 奇数返回 0
|
||||
|
||||
function panduan(e){
|
||||
|
||||
if(e%2){
|
||||
|
||||
return 0
|
||||
|
||||
}else{
|
||||
|
||||
return 1
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4. 有下面一段代码 请写出答案
|
||||
```javascript
|
||||
let obg = {
|
||||
name:"啦啦啦",
|
||||
age:18
|
||||
}
|
||||
function func(o){
|
||||
o.name = 123
|
||||
}
|
||||
func(obg)
|
||||
|
||||
```
|
||||
执行完之后obg的值是什么， 为什么
|
||||
|
||||
{name:123,age:18}
|
||||
|
||||
func(obg) 把obg 当作参数传了进去 然后 从函数体内 修改了obj里name的值为123
|
||||
|
||||
然后 重新输出obg时 name 就变成123了
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
5. 有下面一段代码 请写出答案
|
||||
```javascript
|
||||
let n = "喵喵喵"
|
||||
window.n = "汪汪汪"
|
||||
let obg = {
|
||||
n:"啦啦啦",
|
||||
echo: ()=> {
|
||||
return this.n;
|
||||
}
|
||||
}
|
||||
let jieguo = obg.echo()
|
||||
```
|
||||
请问变量 jieguo 的值是什么，为什么
|
||||
|
||||
汪汪汪
|
||||
|
||||
箭头函数内部没有this 他的this会指向外面一层的对象，所以会从window 里取n的值 即汪汪汪
|
||||
|
||||
|
||||
|
||||
6. 请写出一个构造函数 他有一个name 属性和一个 echo方法 执行echo的时候会返回他name的值 new 的时候将传入的参数的值赋值给name
|
||||
|
||||
function miao(name){
|
||||
|
||||
this.name=name
|
||||
|
||||
this.echo=function(){
|
||||
|
||||
return this.name
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
var mao=new Miao('本猫咪')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7. 分析下面代码的预编译过程
|
||||
|
||||
```
|
||||
var shopname='解忧杂货店';
|
||||
var auth="东野圭吾"
|
||||
function echo(pri){
|
||||
var say=function(){console.log("welcome")}
|
||||
age=40
|
||||
function end(){
|
||||
console.log('欢迎下次光临')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
echo("0.0")
|
||||
```
|
||||
|
||||
|
||||
|
||||
go:
|
||||
|
||||
1.{
|
||||
|
||||
shopname:undefined
|
||||
|
||||
auth:undefined
|
||||
|
||||
age:undefined
|
||||
|
||||
echo:undefined
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
2.{
|
||||
|
||||
shopname:"解忧杂货店"
|
||||
|
||||
auth:"东野圭吾"
|
||||
|
||||
age:40,
|
||||
|
||||
echo:undefined
|
||||
|
||||
}
|
||||
|
||||
3.{
|
||||
|
||||
shopname:"解忧杂货店"
|
||||
|
||||
auth:"东野圭吾"
|
||||
|
||||
age:40,
|
||||
|
||||
echo:function
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
AO:
|
||||
|
||||
1.{
|
||||
|
||||
pri:undefined
|
||||
|
||||
say:undefined
|
||||
|
||||
end:undefined
|
||||
|
||||
}
|
||||
|
||||
2.{
|
||||
|
||||
pri:0.0,
|
||||
|
||||
say:function(){},
|
||||
|
||||
end:undefined
|
||||
|
||||
}
|
||||
|
||||
3.
|
||||
|
||||
{
|
||||
|
||||
pri:0.0,
|
||||
|
||||
say:function(){},
|
||||
|
||||
end:function(){},
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user