today note

abstain23 · Dec 18, 2019 · 79562c6 · 79562c6
1 parent 459f4b0
commit 79562c6
Show file tree

Hide file tree

Showing 16 changed files with 781 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.validate.enable": false
+}
diff --git a/CSSdemo/heart.html b/CSSdemo/heart.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>跳动的小爱心</title>
+</head>
+<body>
+    <div class="heart"></div>
+    <div id="star-five"></div>
+</body>
+<style>
+/* 设置一个初始的宽高 */
+html,body {
+    width: 100%;
+    height: 100%;
+}
+/* 给body初始化一些样式，并且设置为flex盒子 */
+body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(190, 153, 153);
+}
+/* 给我们的爱心设置一下样式，并且初始化动画 */
+.heart {
+    width: 60px;
+    height: 60px;
+    background-color: rgb(221, 35, 35);
+    position: relative;
+    animation: beat 1.5s linear infinite;
+}
+/* 利用为元素,分别添加两个圆，为了看出差别，颜色先不一样*/
+.heart:before,.heart:after{
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    background-color: rgb(221, 35, 35);
+    border-radius: 50%;
+}
+/* 设置两个伪元素的位置 */
+.heart:before{
+    left: 30px;
+}
+.heart:after {
+    top: -30px;
+}
+/* 定义beat动画 */
+@keyframes beat {
+    0%{
+    transform:scale(1) rotate(-45deg);
+  }
+  25%{
+    transform:scale(1.3) rotate(-45deg);
+  }
+
+  50%{
+    transform:scale(1) rotate(-45deg);
+  }
+
+  75%{
+    transform:scale(1.3) rotate(-45deg);
+  }
+
+  100%{
+    transform:scale(1) rotate(-45deg);
+  }
+}
+</style>
+<style>
+#star-five {
+  margin: 50px 0;
+  position: relative;
+  display: block;
+  color: red;
+  width: 0px;
+  height: 0px;
+  border-right: 100px solid transparent;
+  border-bottom: 70px solid red;
+  border-left: 100px solid transparent;
+  transform: rotate(35deg);
+}
+#star-five:before {
+  border-bottom: 80px solid red;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  position: absolute;
+  height: 0;
+  width: 0;
+  top: -45px;
+  left: -65px;
+  display: block;
+  content: '';
+  transform: rotate(-35deg);
+}
+#star-five:after {
+  position: absolute;
+  display: block;
+  color: red;
+  top: 3px;
+  left: -105px;
+  width: 0px;
+  height: 0px;
+  border-right: 100px solid transparent;
+  border-bottom: 70px solid red;
+  border-left: 100px solid transparent;
+  transform: rotate(-70deg);
+  content: '';
+}
+</style>
+</html>
diff --git a/ES6/defineProperty.js b/ES6/defineProperty.js
@@ -0,0 +1,62 @@
+// 属性描述符必须是数据描述符或者存取描述符两种形式之一，不能同时是两者
+
+Object.defineProperty({}, "num", {
+  value: 1,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+
+
+var value = 1;
+Object.defineProperty({}, "num", {
+    get : function(){
+      return value;
+    },
+    set : function(newValue){
+      value = newValue;
+    },
+    enumerable : true,
+    configurable : true
+});
+
+
+// Object.defineProperty({}, "num", {
+//   value: 1,
+//   get: function() {
+//       return 1;
+//   }
+// });  报错
+
+function Test() {
+  var name = null
+  var names = []
+
+  Object.defineProperty(this,'name', {
+    get(){
+      console.log('get操作')
+      return name
+    },
+    set(newValue){
+      console.log('set操作')
+      name = newValue
+      names.push({name: name})
+    }
+  })
+  this.getName = function(){
+    return names
+  }
+}
+
+var tt = new Test()
+
+tt.name
+tt.name = 'yy'
+tt.name = 'zz'
+tt.getName()
+
+
+var obj = {
+  value: 1
+}
+
diff --git a/ES6/proxy.js b/ES6/proxy.js
@@ -0,0 +1,7 @@
+// @ts-nocheck
+var proxy = new Proxy({}, {
+  get(target, propKey){
+    return 35
+  }
+})
+
diff --git a/ES6/watch.html b/ES6/watch.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+
+<body>
+  <span id="container">1</span>
+  <button id="button">点击加 1</button>
+
+  <script>
+    (function () {
+      var root = this;
+      function watch(obj, name, func) {
+        var value = obj[name];
+
+        Object.defineProperty(obj, name, {
+          get: function () {
+            return value;
+          },
+          set: function (newValue) {
+            value = newValue;
+            func(value)
+          }
+        });
+
+        if (value) obj[name] = value
+      }
+
+      this.watch = watch;
+    })()  
+
+    var obj = {
+    value: 1
+}
+    watch(obj, "value", function (newvalue) {
+      document.getElementById('container').innerHTML = newvalue;
+    })
+
+    document.getElementById('button').addEventListener("click", function () {
+      obj.value += 1
+    });
+
+
+  </script>
+</body>
+
+</html>
diff --git a/every morning/1217.js b/every morning/1217.js
@@ -0,0 +1,17 @@
+function a() {
+  console.log(1)
+}
+(function f(b){
+  a()
+  a = function() {
+    console.log(2)
+  }
+  function a(){
+    console.log(3)
+  }
+  a()
+  var a
+  a && a()
+  b()
+})(a)
+//3 2 2 1
diff --git a/every morning/1218.js b/every morning/1218.js
@@ -0,0 +1,77 @@
+// js 赋值语句有返回值，就是等号右边的值！
+
+function foo() {
+  console.log( this.a );
+}
+
+var a = 2;
+var o = { a: 3, foo: foo };
+var p = { a: 4 };
+
+o.foo(); //3
+(p.foo = o.foo)(); //2 
+
+function xx() {
+  console.log(this.name)
+}
+
+var obj = {
+  name: 'obj',
+  yy(){
+      console.log(this)
+  }
+}
+var obj2 = {
+  name: 'obj2'
+}
+
+obj.yy();
+
+(obj2.zz = obj.yy)();
+
+
+//逗号运算符，它将先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值。
+
+var a = 10, b = 20;
+
+function CommaTest(){
+    return a++, b++, 10;
+}
+
+var c = CommaTest();
+
+alert(a); // 返回11
+alert(b); // 返回21
+alert(c); // 返回10
+
+(12,obj.yy)() // window
+
+
+////
+
+
+var name = 222
+
+var a = {
+  name: '111',
+  say() {
+    console.log(this.name)
+  }
+}
+
+var fun = a.say
+fun()
+a.say()
+
+var b = {
+  name: '333',
+  say(fn){
+    fn()
+  }
+}
+
+b.say(a.say)
+
+b.say = a.say
+
+b.say()