七夕给女朋友做的一个小礼物

今天正值七夕佳节，想着给女朋友表白，就做了一个小demo，很简单很简单，界面只显示一颗爱心，但是简短的代码里有着我自己想表达的情意

      let nowadays, future, dueTime,somewords;
      nowadays = new Date().getTime();
      future = 1565154841314;
      dueTime = Math.abs(nowadays - future);
      let echo = "mygirlname";
      let thatgirl = new Object();
      thatgirl.virtue = "optimistic and generous";
      thatgirl.advantage = "beautiful and charming";
      thatgirl.merit = "lovable";
      thatgirl[echo] = "syj";
      somewords = 'Baby,I love you';

      function forYou() {
        let $div1 = $("
");
        let $div2 = $("
");
        let $div3 = $("
");
        let $div4 = $("
");
        $div1.css({
          position: "absolute",
          top: "100px",
          left: "0px",
          width: "0px",
          height: "0px",
          border: "100px solid red",
          borderRadius: "100px",
          display: "inline-block"
        });
        $div2.css({
          position: "absolute",
          top: "100px",
          left: "100px",
          width: "0px",
          height: "0px",
          border: "100px solid red",
          display: "inline-block"
        });
        $div3.css({
          position: "absolute",
          top: "0px",
          left: "100px",
          width: "0px",
          height: "0px",
          border: "100px solid red",
          borderRadius: "100px",
          display: "inline-block"
        });
        $div4.css({
          position: "absolute",
          top: "-100px",
          left: "200px",
          width: "0px",
          height: "0px",
          border: "0px solid transparent",
          transform:"rotate(45deg)",
          display: "inline-block"
        })
        $("body").append($div4);
        $($div4).append($div1,$div2,$div3);
      }
      if(somewords){
        forYou();
      }

哈哈哈，是有点简单，但是看了我想表达的内容后，女朋友还是很开心。

这里面主要用了以下几个知识点：
1.date()对象

var date = new Date()；

可以获得当前时间
getTime()可以将时间转换成字符串时间戳
2.ES6中支持对象属性名是一个变量

var prop = 'name';
var obj = {
[prop] : 'rng'
}
console.log(obj.name);
//rng

这是es6中对象扩展的一个知识点
3.用js动态操作DOM元素
这里使用了jQuery，操作更加简单
新建元素直接：

 var $div = $("
");

将其插入到目标节点

 $("body").append($div);
 //在body插入之前创建的div

然后是css
4. 用css绘制爱心

	  div {
        position: absolute;
        width: 0px;
        height: 0px;
        display: inline-block;
      }
      .one {
        top: 100px;
        left: 0px;
        border: 100px solid red;
        border-radius: 100px;
      }
      .two {
        top: 100px;
        left: 100px;
        border: 100px solid yellow;
      }
      .three {
        top: 0px;
        left: 100px;
        border: 100px solid green;
        border-radius: 100px;
      }
      .box {
        top: -100px;
        left: 200px;
        border: 100px solid transparent;
        transform: rotate(45deg);
      }