Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 4 months ago
parent
8521737e5f
commit
43aff03a09
24 changed files with 81 additions and 22 deletions
Unified View Show Diff Stats
  1. 1 0
      3_js复习/10_布尔型扩展.html
  2. 18 0
      3_js复习/8_代码规范.html
  3. 2 0
      3_js复习/综合题4_编程题4.html
  4. 2 1
      3_js复习/综合题6_选择判断.html
  5. 6 0
      4_BOM/4_滚动条.html
  6. 6 1
      4_BOM/5_定时器.html
  7. 1 0
      5_DOM/10_添加属性.html
  8. 1 1
      5_DOM/11_控制类.html
  9. 5 0
      5_DOM/14_css盒模型补充.html
  10. 6 0
      5_DOM/15_鼠标移入移出.html
  11. 1 0
      5_DOM/22_事件委托.html
  12. 4 0
      5_DOM/练习10_移动正方形.html
  13. 2 1
      5_DOM/练习3_右键菜单.html
  14. 1 1
      6_ES6/10_数据循环.html
  15. 3 3
      6_ES6/11_ES新增遍历.html
  16. 6 3
      6_ES6/12_数组新增方法.html
  17. 4 3
      6_ES6/14_对象扩展.html
  18. 2 2
      6_ES6/16_this指向.html
  19. 1 0
      6_ES6/17_原型.html
  20. 1 0
      6_ES6/1_新的声明方法.html
  21. 1 1
      6_ES6/2_块级作用域.html
  22. 2 0
      6_ES6/5_栈内存&堆内存.html
  23. 4 4
      6_ES6/8_结构赋值.html
  24. 1 1
      6_ES6/练习题2_函数及变量解答.html

+ 1 - 0
3_js复习/10_布尔型扩展.html
View File 

@@ -18,6 +18,7 @@
 
         // var a = null;
 
         // var a = null;
 
         // 数组类型永远都为真
 
         // 数组类型永远都为真
 
         // var a = [];
 
         // var a = [];
 
+        // 对象类型永远都为真
 
         var a = {};
 
         var a = {};
 
         if(a){
 
         if(a){
 
             console.log("真");
 
             console.log("真");

+ 18 - 0
3_js复习/8_代码规范.html
View File 

@@ -0,0 +1,18 @@
 
+<!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>
 
+        var userName = "abc";
 
+        // 变量名命名规则
 
+        // 见名知意 通过变量名大概知道含义
 
+        // （驼峰命名-小驼峰）如果出现多个单词，第一个单词首字母小写后面单词的首字母大写
 
+        // （帕斯卡命名-大驼峰）如果出现多个单词，每个单词的首字母都大写
 
+        // 等号 左右两边加上空格
 
+    </script>
 
+</body>
 
+</html>

+ 2 - 0
3_js复习/综合题4_编程题4.html
View File 

@@ -8,8 +8,10 @@
 
 <body>
 
 <body>
 
     <script>
 
     <script>
 
         var sum = 0;
 
         var sum = 0;
 
+        // 计算1！+2！+3！+...+10！
 
         for(var i=1;i<=10;i++){
 
         for(var i=1;i<=10;i++){
 
             var res = 1;
 
             var res = 1;
 
+            // 计算阶乘
 
             for(var j=1;j<=i;j++){
 
             for(var j=1;j<=i;j++){
 
                 res *= j;
 
                 res *= j;
 
             }
 
             }

+ 2 - 1
3_js复习/综合题6_选择判断.html
View File 

@@ -43,7 +43,8 @@
 
         // var str = new String();
 
         // var str = new String();
 
         var str = "hello world";
 
         var str = "hello world";
 
         // console.log(str[1]);
 
         // console.log(str[1]);
 
-        console.log(str.charAt(1));
 
+        // console.log(str.charAt(1));
 
+        console.log(str.indexOf("x"));
 
         
         
         
         
     </script>
 
     </script>

+ 6 - 0
4_BOM/4_滚动条.html
View File 

@@ -17,6 +17,12 @@
 
     <script>
 
     <script>
 
         // 控制滚动条滚动 两个参数 第一个横向 第二个纵向
 
         // 控制滚动条滚动 两个参数 第一个横向 第二个纵向
 
         window.scrollTo(0,5000);
 
         window.scrollTo(0,5000);
 
+        // 控制滚动条滚动 两个参数 第一个横向 第二个纵向
 
+        // scrollBy 控制滚动条滚动是相对于当前位置 
+        window.scrollBy(0,5000);
 
+
 
+        window.scrollX; // 获取横向滚动条的位置
 
+        window.scrollY; // 获取纵向滚动条的位置
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 6 - 1
4_BOM/5_定时器.html
View File 

@@ -23,10 +23,15 @@
 
             console.log("hello world");
 
             console.log("hello world");
 
         },1000);
 
         },1000);
 
         console.log(timer);
 
         console.log(timer);
 
-        
+
 
         setTimeout(function(){
 
         setTimeout(function(){
 
+            // 清除定时器 clearInterval
 
             clearInterval(timer);
 
             clearInterval(timer);
 
         },3000);
 
         },3000);
 
+
 
+        //清除定时器 clearTimeout
 
+        clearTimeout();
 
+
 
         // console.log(timer2);
 
         // console.log(timer2);
 
         
         
         // function fn(){
 
         // function fn(){

+ 1 - 0
5_DOM/10_添加属性.html
View File 

@@ -22,6 +22,7 @@
 
         oImg.index = 1;
 
         oImg.index = 1;
 
         console.log(oImg.index);
 
         console.log(oImg.index);
 
 
 
+        
 
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 1 - 1
5_DOM/11_控制类.html
View File 

@@ -32,7 +32,7 @@
 
         // oBox.classList.remove("box2");
 
         // oBox.classList.remove("box2");
 
         // oBox.classList.add("box2");
 
         // oBox.classList.add("box2");
 
 
 
-        oBox.classList.replace("box2","box3");
 
+        // oBox.classList.replace("box2","box3");
 
 
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 5 - 0
5_DOM/14_css盒模型补充.html
View File 

@@ -12,8 +12,13 @@
 
             padding:10px;
 
             padding:10px;
 
             margin:10px;
 
             margin:10px;
 
             background-color: red;
 
             background-color: red;
 
+            /* 修改盒模型 ：怪异盒模型 */
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
+            /* 修改和模型：标准盒模型 */
 
+            /* box-sizing: content-box; */
 
         }
 
         }
 
+        /* 标准盒模型 padding border 会影响当前元素大小 */
 
+        /* 怪异盒模型 padding border 不会影响当前元素大小*/
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>

+ 6 - 0
5_DOM/15_鼠标移入移出.html
View File 

@@ -29,6 +29,12 @@
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <script>
 
     <script>
 
+        // onmouseover 与 onmouseenter 区别
 
+        // onmouseover 会出发事件冒泡
 
+        // onmouseenter 不会触发事件冒泡
 
+        // onmouseout 与 onmouseleave 区别
 
+        // onmouseout 会触发事件冒泡
 
+        // onmouseleave 不会触发事件冒泡
 
         var oBox = document.getElementsByClassName("box")[0];
 
         var oBox = document.getElementsByClassName("box")[0];
 
         var oBox2 = document.getElementsByClassName("box2")[0];
 
         var oBox2 = document.getElementsByClassName("box2")[0];
 
         var oBox3 = document.getElementsByClassName("box3")[0];
 
         var oBox3 = document.getElementsByClassName("box3")[0];

+ 1 - 0
5_DOM/22_事件委托.html
View File 

@@ -24,6 +24,7 @@
 
         //         console.log(this.innerText);
 
         //         console.log(this.innerText);
 
         //     })
 
         //     })
 
         // }
 
         // }
 
+        // 事件委托 通过给父元素绑定事件 来处理内部子元素事件
 
         oBox.addEventListener("click",function(e){
 
         oBox.addEventListener("click",function(e){
 
             console.log(e.target.innerText);
 
             console.log(e.target.innerText);
 
         })
 
         })

+ 4 - 0
5_DOM/练习10_移动正方形.html
View File 

@@ -22,10 +22,14 @@
 
         var oDom = document.documentElement;
 
         var oDom = document.documentElement;
 
 
 
         oBox.onmousedown = function (e) {
 
         oBox.onmousedown = function (e) {
 
+            // 获取鼠标点击的位置
 
             var x = e.clientX;
 
             var x = e.clientX;
 
             var y = e.clientY;
 
             var y = e.clientY;
 
+            // 获取盒子距离页面顶部的距离
 
             var boxTop = oBox.offsetTop;
 
             var boxTop = oBox.offsetTop;
 
+            // 获取盒子距离页面左边的距离
 
             var boxLeft = oBox.offsetLeft;
 
             var boxLeft = oBox.offsetLeft;
 
+            // 获取鼠标点击位置 在盒子里的位置
 
             var thisTop = y - boxTop;
 
             var thisTop = y - boxTop;
 
             var thisLeft = x - boxLeft;
 
             var thisLeft = x - boxLeft;
 
             oDom.onmousemove = function (e) {
 
             oDom.onmousemove = function (e) {

+ 2 - 1
5_DOM/练习3_右键菜单.html
View File 

@@ -78,7 +78,8 @@
 
             oMenu.style.top = y+"px";
 
             oMenu.style.top = y+"px";
 
             // 显示菜单及蒙版
 
             // 显示菜单及蒙版
 
             oContainer.style.display = "block";
 
             oContainer.style.display = "block";
 
-            // e.preventDefault();
 
+            // 阻止默认事件
 
+            e.preventDefault();
 
             // return false;
 
             // return false;
 
         }
 
         }
 
         // 点击蒙版隐藏菜单
 
         // 点击蒙版隐藏菜单

+ 1 - 1
6_ES6/10_数据循环.html
View File 

@@ -75,7 +75,7 @@
 
             d:4,
 
             d:4,
 
             e:5
 
             e:5
 
         }
 
         }
 
-        // console.log(obj.a);
 
+        console.log(obj.a);
 
         // for in 循环是对象下的方法 负责对对象进行遍历
 
         // for in 循环是对象下的方法 负责对对象进行遍历
 
         for(let key in obj){
 
         for(let key in obj){
 
             console.log(key+":"+obj[key]);
 
             console.log(key+":"+obj[key]);

+ 3 - 3
6_ES6/11_ES新增遍历.html
View File 

@@ -44,9 +44,9 @@
 
         //     let value = val[1];
 
         //     let value = val[1];
 
         //     console.log(key,value);
 
         //     console.log(key,value);
 
         // }
 
         // }
 
-        for(let [key,value] of arr.entries()){
 
-            console.log(key,value);
 
-        }
 
+        // for(let [key,value] of arr.entries()){
 
+        //     console.log(key,value);
 
+        // }
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 6 - 3
6_ES6/12_数组新增方法.html
View File 

@@ -31,9 +31,12 @@
 
         // // Array.of 将一组值转化为数组
 
         // // Array.of 将一组值转化为数组
 
         // let arr = Array.of(a,b,c,d,aLi[0]);
 
         // let arr = Array.of(a,b,c,d,aLi[0]);
 
         // console.log(arr);
 
         // console.log(arr);
 
-        let arr = new Array(1,2,3,4,5);
 
-        arr.fill("a",0,3);
 
-        console.log(arr)
 
+        // let arr = new Array(1,2,3,4,5);
 
+        // fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
 
+        // arr.fill("a",0,3);
 
+        // console.log(arr)
 
+
 
+        
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 4 - 3
6_ES6/14_对象扩展.html
View File 

@@ -102,9 +102,10 @@
 
         // Object.entries 把当前对象的所有属性名和属性值组成数组返回
 
         // Object.entries 把当前对象的所有属性名和属性值组成数组返回
 
         // console.log(Object.entries(obj));
 
         // console.log(Object.entries(obj));
 
 
 
-        let arr = [["name","张三"],["age",20]];
 
-        console.log(Object.fromEntries(arr));
 
-            
+        // let arr = [["name","张三"],["age",20]];
 
+        // Object.fromEntries 把数组转换成对象
 
+        // console.log(Object.fromEntries(arr));
 
+

+ 2 - 2
6_ES6/16_this指向.html
View File 

@@ -61,8 +61,8 @@
 
 
 
         // foo.call(obj,"hello");
 
         // foo.call(obj,"hello");
 
         // foo.apply(obj,["hello"]);
 
         // foo.apply(obj,["hello"]);
 
-        var foo2 = foo.bind(obj,"hello");
 
-        foo2();
 
+        // var foo2 = foo.bind(obj,"hello");
 
+        // foo2();
 
 
 
         // call 可以改变this指向 参数有多个 第一个是this指向新对象 后面的参数是传入foo的参数
 
         // call 可以改变this指向 参数有多个 第一个是this指向新对象 后面的参数是传入foo的参数
 
         // foo.call(obj,"hello");
 
         // foo.call(obj,"hello");

+ 1 - 0
6_ES6/17_原型.html
View File 

@@ -0,0 +1 @@
 
+html

+ 1 - 0
6_ES6/1_新的声明方法.html
View File 

@@ -85,6 +85,7 @@
 
         // foo();
 
         // foo();
 
         // console.log(a);
 
         // console.log(a);
 
 
 
+        // 块级作用域使用let定义变量时 只要有大括号{} 就会产生一个作用域名
 
         if(true){
 
         if(true){
 
             let a = 10;
 
             let a = 10;
 
         }
 
         }

+ 1 - 1
6_ES6/2_块级作用域.html
View File 

@@ -17,7 +17,7 @@
 
     <script>
 
     <script>
 
         var aLi = document.getElementsByTagName('li');
 
         var aLi = document.getElementsByTagName('li');
 
         for(let i=0;i<aLi.length;i++){
 
         for(let i=0;i<aLi.length;i++){
 
-            aLi[i].index = i;
 
+            // aLi[i].index = i;
 
             aLi[i].onclick = function(){
 
             aLi[i].onclick = function(){
 
                 console.log(i);
 
                 console.log(i);
 
             }
 
             }

+ 2 - 0
6_ES6/5_栈内存&堆内存.html
View File 

@@ -34,6 +34,8 @@
 
         arr[5][0] = "x";
 
         arr[5][0] = "x";
 
         console.log(arr2,arr);
 
         console.log(arr2,arr);
 
 
 
+        
+
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 4 - 4
6_ES6/8_结构赋值.html
View File 

@@ -58,8 +58,8 @@
 
         // let {a,b} = foo();
 
         // let {a,b} = foo();
 
         // console.log(a,b);
 
         // console.log(a,b);
 
 
 
-        let a = 1;
 
-        let b = 2;
 
+        // let a = 1;
 
+        // let b = 2;
 
         
         
         // let c = a;
 
         // let c = a;
 
         // a = b;
 
         // a = b;
 
@@ -68,9 +68,9 @@
 
         // a = a + b;
 
         // a = a + b;
 
         // b = a - b;
 
         // b = a - b;
 
         // a = a - b;
 
         // a = a - b;
 
-        [a,b] = [b,a];
 
+        // [a,b] = [b,a];
 
         
         
-        console.log(a,b);
 
+        // console.log(a,b);
 
 
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 1 - 1
6_ES6/练习题2_函数及变量解答.html
View File 

@@ -59,7 +59,7 @@
 
         //     function f() { console.log(2) };
 
         //     function f() { console.log(2) };
 
         //     f();
 
         //     f();
 
         // })();
 
         // })();
 
-
 
+        
         // if (!("a" in window)) {
 
         // if (!("a" in window)) {
 
         //     var a = 10;
 
         //     var a = 10;
 
         // }
 
         // }