2017-10-20

nizp · Oct 20, 2017 · 7808cff · 7808cff
1 parent 0c60157
commit 7808cff
Show file tree

Hide file tree

Showing 7 changed files with 438 additions and 0 deletions.
diff --git a/2017-10-20/1_原型继承.html b/2017-10-20/1_原型继承.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+<style>
+#box{
+    width:100px;
+    height: 100px;
+    background: red;
+    position: absolute;
+    top:0;
+    left:0;
+}
+#box2{
+    width:100px;
+    height: 100px;
+    background: skyblue;
+    position: absolute;
+    top:0;
+    left:100px;
+}
+</style>
+</head>
+<body>
+    sdsadsadjhsjdhsa
+    <div id="box"></div>
+    <div id="box2"></div>
+<script>
+    function Drag(id){
+        this.box = document.getElementById(id);
+        this.disX = 0;
+        this.disY = 0;
+    }
+
+    Drag.prototype.init = function(){
+        var _this = this;
+        this.box.addEventListener('mousedown',down);
+        function down(ev){
+            _this.down(ev);
+        }
+    }
+
+    Drag.prototype.down = function(ev){
+        var _this = this;
+        this.disX = ev.clientX - this.box.offsetLeft;
+        this.disY = ev.clientY - this.box.offsetTop;
+        var move = function(ev){
+            _this.move(ev);
+        }
+        var up = function(ev){
+            _this.up(ev,move,up);
+        }
+        document.addEventListener('mousemove',move);
+        document.addEventListener('mouseup',up);
+
+        ev.preventDefault();
+    }
+
+    Drag.prototype.move = function(ev){
+        this.box.style.left = ev.clientX - this.disX + 'px';
+        this.box.style.top = ev.clientY - this.disY + 'px';
+    }
+    Drag.prototype.up = function(ev,move,up){
+        document.removeEventListener('mousemove',move);
+        document.removeEventListener('mouseup',up);
+    }
+
+    //调用父类实现（改变this指向）属性继承。
+    function Drag2(id){
+        Drag.call(this,id);
+    }
+
+    // for(var attr in Drag.prototype){
+    //     if(Drag.prototype.hasOwnProperty(attr)){
+    //         Drag2.prototype[attr] = Drag.prototype[attr];
+    //     }
+    // }
+
+    /*
+        p.__proto__ -> Paohui.prototype
+    */
+    function Paohui(){}
+    Paohui.prototype = Drag.prototype;
+    var p = new Paohui;
+    Drag2.prototype = p;
+
+    Drag2.prototype.move = function(ev){
+        var l = ev.clientX - this.disX;
+        if(l<0)l=0;
+        this.box.style.left = l  + 'px';
+        this.box.style.top = ev.clientY - this.disY + 'px';
+    }
+    var d2 = new Drag2('box2');
+    d2.init();
+
+
+
+
+
+
+
+    var d = new Drag('box');
+
+    d.init();
+
+
+</script>
+</body>
+</html>
diff --git a/2017-10-20/2_ES6的继承.html b/2017-10-20/2_ES6的继承.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+<style>
+#box{
+    width:100px;
+    height: 100px;
+    background: red;
+    position: absolute;
+    top:0;
+    left:0;
+}
+#box2{
+    width:100px;
+    height: 100px;
+    background: skyblue;
+    position: absolute;
+    top:0;
+    left:100px;
+}
+</style>
+</head>
+<body>
+    <div id="box"></div>
+    <div id="box2"></div>
+<script>
+
+    /*
+       使用ES6的class不能使用Drag.prototype = {}
+        Drag.prototype = {
+            constructor:Drag,
+            move,
+            up,
+            down
+        }
+    */
+    class Drag {
+        constructor(id){
+            this.box = document.getElementById(id);
+            this.disX = 0;
+            this.disY = 0;
+        }
+
+        init(){
+            this.box.addEventListener('mousedown',(ev)=>{
+                this.down(ev);
+            });
+        }
+
+        down(ev){
+            this.disX = ev.clientX - this.box.offsetLeft;
+            this.disY = ev.clientY - this.box.offsetTop;
+            var move = ev => this.move(ev);
+            var up = ev => this.up(ev,move,up);
+
+            document.addEventListener('mousemove',move);
+            document.addEventListener('mouseup',up);
+            ev.preventDefault();
+
+        }
+        move(ev){
+            this.box.style.left = ev.clientX - this.disX + 'px';
+            this.box.style.top = ev.clientY - this.disY + 'px';
+        }
+        up(ev,move,up){
+            document.removeEventListener('mousemove',move);
+            document.removeEventListener('mouseup',up);
+        }
+    }
+    // Drag.prototype.say = function(){
+    //     alert('说');
+    // }
+
+
+    class Drag2 extends Drag {
+       constructor(id,txt){
+
+            //继承写了constructor必须写super，不然会报错
+            //在super()上面就不能设置属性(不能使用this)，不然会报错
+            // this.txt = txt;   报错
+            super(id);
+            this.txt = txt;
+
+       }
+       say(){
+           alert(this.txt);
+       }
+       move(ev){
+            var l = ev.clientX - this.disX;
+            if(l<0)l=0;
+            this.box.style.left = l  + 'px';
+            this.box.style.top = ev.clientY - this.disY + 'px';
+        }
+
+    }
+
+    var d = new Drag('box');
+    var d2 = new Drag2('box2','呵呵');
+    d.init();
+    d2.init();
+    d2.say();
+    d.say();
+</script>
+</body>
+</html>
diff --git a/2017-10-20/3_ES6变量常量.html b/2017-10-20/3_ES6变量常量.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+<script>
+    //var a = 10;
+
+    /*
+        变量:
+            let
+                在同域下不能多次声明一个变量名
+                暂存死区（没有预解析），在变量的上方打印不出undefined，而是报错
+                不会在window下创建这个变量。
+        常量:(不可变的量，要变就报错)
+            const
+                在同域下不能多次声明一个变量名
+                暂存死区（没有预解析），在变量的上方打印不出undefined，而是报错
+                不会在window下创建这个变量。
+                立即声明立即赋值使用
+    */
+
+    // let b = 20;
+    // b = 30;
+    // console.log(b);
+
+    // const c = 10;
+    // c ++;
+    // console.log(c);
+
+    // {
+    //     let b = 10;
+    //     {
+    //         alert(b);
+    //     }
+    // }
+
+
+    // let a = 10;
+    // let a;
+    const a = 0;
+    console.dir(a);
+
+
+</script>
+</body>
+</html>
diff --git a/2017-10-20/4_块.html b/2017-10-20/4_块.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <button>按钮一</button>
+    <button>按钮二</button>
+    <button>按钮三</button>
+<script>
+   /*
+     {} 块
+   */
+  var a = 10;
+  var d = 1;
+  var obj = {
+      fn(){
+          console.log(this);
+      },
+      a,
+      ["num"+1]:12,
+      ["num"+2]:13
+  }
+//   obj.fn();
+//   console.log(obj);
+  document.onclick = function(){
+      d++;
+      console.log(obj["num"+d]);
+  }
+
+  {
+      let h  = 100;
+      var k = 8;
+      {
+        //   console.log(y); //找不到
+          {
+              {
+                let y = 110; 
+                console.log(h);
+              }
+          }
+      }
+  }
+//   console.log(k);
+
+const btns = document.getElementsByTagName('button');
+
+for(let i = 0;i<btns.length;i++) {
+    btns[i].onclick = function(){
+        alert(i);
+    }
+}
+// {
+//     console.log(i); 
+// }
+/*
+    for(let i = 0;i<btns.length;i++){
+        btns[0].onclick = function(){
+            alert(0);
+        }
+    }
+    for(let i = 0;i<btns.length;i++){
+        btns[1].onclick = function(){
+            alert(1);
+        }
+    }
+*/
+
+
+
+
+
+
+
+</script>
+</body>
+</html>
diff --git a/2017-10-20/5_组件.html b/2017-10-20/5_组件.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="box"></div>
+<script src="myTabs.js"></script>
+<script>
+    /*
+        组件:
+            为了方便复用（造轮子）
+    */
+    var t = new Tabs('box');
+    t.init({
+        btns:['社会','科技','财经'],
+        content:['19大','无人驾驶','睁开眼1个亿'],
+        events:'onmouseover'
+    });
+
+</script>
+</body>
+</html>