1 рік тому · 666dc82a23
--- a/day22/css/9.demo.css
+++ b/day22/css/9.demo.css
@@ -0,0 +1,18 @@
 
				+
			
 
				+
			
 
				+.container {
			
 
				+    display: flex;
			
 
				+    height: 220px;
			
 
				+    overflow-x: scroll;
			
 
				+    /* overflow-y: scroll; */
			
 
				+}
			
 
				+.main {
			
 
				+    flex: 1;
			
 
				+    display: flex;
			
 
				+}
			
 
				+#box {
			
 
				+    width: 200px;
			
 
				+    height: 200px;
			
 
				+    background: #f00;
			
 
				+    margin-left: 20px;
			
 
				+}
			
--- a/day22/html/7.rest.html
+++ b/day22/html/7.rest.html
@@ -0,0 +1,11 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <script src="../js/7.rest.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day22/html/8.箭头函数.html
+++ b/day22/html/8.箭头函数.html
@@ -0,0 +1,16 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <ul>
			
 
				+        <li>1</li>
			
 
				+        <li>2</li>
			
 
				+        <li>3</li>
			
 
				+    </ul>
			
 
				+    <script src="../js/8.箭头函数.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day22/html/9.h5横滚排版.html
+++ b/day22/html/9.h5横滚排版.html
@@ -0,0 +1,24 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <link rel="stylesheet" href="../css/9.demo.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="container">
			
 
				+        <div class="main">
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+            <div id="box"></div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/day22/js/7.rest.js
+++ b/day22/js/7.rest.js
@@ -0,0 +1,20 @@
 
				+/**
			
 
				+ * rest参数  用于获取函数的实参 主要是用来代替arguments
			
 
				+ */
			
 
				+//rest
			
 
				+function fn1(...a) {
			
 
				+    console.log(arguments,'1');
			
 
				+    console.log(...arguments,'2');//spread
			
 
				+    console.log(a,'3');
			
 
				+    console.log(...a,'4');
			
 
				+}
			
 
				+fn1(1,2,3,4,5)
			
 
				+
			
 
				+function fn2(a,b,...c) {
			
 
				+    console.log(a,'a')
			
 
				+    console.log(b,'b')
			
 
				+    console.log(...c,'c')
			
 
				+    // console.log(...arguments)
			
 
				+}
			
 
				+fn2(3,4,5,6,7,8,9);
			
 
				+// var {}
			
--- a/day22/js/8.箭头函数.js
+++ b/day22/js/8.箭头函数.js
@@ -0,0 +1,62 @@
 
				+function fn1() {
			
 
				+    console.log(this,'this');
			
 
				+    console.log(arguments,'arguments');
			
 
				+}
			
 
				+fn1();
			
 
				+
			
 
				+let fn2 = function () {
			
 
				+    console.log("fn2");   
			
 
				+}
			
 
				+fn2();
			
 
				+
			
 
				+// let fn3 = () => {
			
 
				+//     console.log(arguments,'arguments2')
			
 
				+// }
			
 
				+// fn3();
			
 
				+
			
 
				+/**
			
 
				+ * ES6允许使用箭头函数 
			
 
				+ * 箭头函数:（）=> {}
			
 
				+ * 普通函数：function() {} 
			
 
				+ * 1.函数中this指向是window 箭头函数中this指向父级作用域
			
 
				+ * 2.箭头函数中this指向不能改变
			
 
				+ * 3.当传入的实参只有一个值的时候 形参的小括号可以省略
			
 
				+ * 4.当代码块中的语句只有一条时 可以省略代码块
			
 
				+ * 5.箭头函数中不能使用arguments实参 可以使用rest
			
 
				+ * 6.箭头函数不能作为构造函数去new
			
 
				+ */
			
 
				+
			
 
				+var lis = document.querySelectorAll("ul li");
			
 
				+for(let i=0;i<lis.length;i++) {
			
 
				+    lis[i].onclick = function() {
			
 
				+        // setTimeout(()=>{
			
 
				+        //     console.log(this,'2')
			
 
				+        // }.bind(this),1000)
			
 
				+        // setTimeout(function(){
			
 
				+        //     console.log(this,'3')
			
 
				+        // }.bind(this),1000)
			
 
				+    }
			
 
				+    // lis[i].onclick = () => {
			
 
				+    //     console.log(this,'2')
			
 
				+    // }
			
 
				+}
			
 
				+
			
 
				+let f1 = (...ar) => 
			
 
				+console.log(ar,'实例') ;
			
 
				+
			
 
				+f1(100,1000);
			
 
				+
			
 
				+let person1 = function(name) {
			
 
				+    this.name = name;
			
 
				+    console.log(this.name,'名字')
			
 
				+};
			
 
				+
			
 
				+var p1 = new person1('aa');
			
 
				+console.log(p1,'p1')
			
 
				+
			
 
				+let person2 = (age) => {
			
 
				+    this.age = age;
			
 
				+    console.log(this.age,'年龄');
			
 
				+} 
			
 
				+var p2 = new person2(30);
			
 
				+console.log(p2,'p2');