2019-04-02

Vue屏幕宽度自适应：

https://blog.csdn.net/qq_25386583/article/details/77161478

https://blog.csdn.net/xuaner8786/article/details/81565219

2019-04-07

2019-04-09

  1. Date.parse("2019/04/20 18:14:00")

上方代码转换的结果，单位是毫秒，不是秒。

2019-04-23

  1. const a = [];
  2. const b = {};
  4. console.log(Boolean(a));
  5. console.log(Boolean(b));

上方代码的打印结果均为true。 具体解释，可以看我在 03-JavaScript基础/03-变量的强制类型转换.md这篇文章里讲到的转换为Boolean。

所以，我们平时在写业务代码的时候，“判断是否为空对象/空数组”，不能直接写成 if (myObj)或者if(myArray)，会踩坑。

判断是否为空数组，可以用：

  1. if (myArray.length)

判断是否为空对象，可以用 ：

  1. if (JSON.stringify(myObj) !== '{}')

2019-04-26

我们知道，在移动端页面尅发时，单位一般是采用 rem。

设计稿如果是750px宽，那么，默认换算的单位如下：16px = 1rem。但是这种换算比较麻烦。我们可以在 html里加上如下代码：

  1.     <style>
  2.         html {
  3.             font-size: 20px;
  4.             font-size: 5.3333333vw;
  5.         }
  6.     </style>

这样的话，换算单位就变成了：20px = 1rem。

2019-05-16

最佳的打乱算法是Fisher-Yates算法。

2019-05-16

Vue的全局变量空间：this.$root.data，我们可以在这里面存放数据。比如this.$root.data.skuIdList。

2019-05-17

2019-05-20-css3动画水平/镜像翻转

参考链接1：https://www.oschina.net/question/2443483_247744

代码实现举例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head lang="en">
  4.     <meta charset="UTF-8" />
  5.     <title></title>
  6.     <style>
  7.       @keyframes featuresicon {
  8.         0% {
  9.           transform: scaleX(1);
  10.         }
  12.         20% {
  13.           transform: scaleX(1);
  14.         }
  16.         50% {
  17.           transform: scaleX(0);
  18.         }
  19.         80% {
  20.           transform: scaleX(1);
  21.         }
  22.         100% {
  23.           transform: scaleX(1);
  24.         }
  25.       }
  27.       .cube {
  28.         width: 40px;
  29.         height: 40px;
  30.         background: url(images/bg2.png) left 0 no-repeat;
  32.         animation: featuresicon 1.3s linear alternate none infinite;
  33.       }
  35.       body {
  36.         background-color: cornflowerblue;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="cube"></div>
  42.   </body>
  43. </html>

参考链接2：https://blog.csdn.net/wjnf012/article/details/78679131

代码实现：（立体感更强一点）

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title></title>
  7. <style type="text/css">
  8. *{
  9.    padding: 0;
  10.    margin: 0;
  11. }
  13. .cube{
  14.    display: block;
  15.    color: #ffffff;
  16.    text-align: center;
  17.    width: 40px;
  18.    height: 40px;
  19.    border-radius: 4px;
  20.    /* background-color: #9a6ad8 */
  21.    background: url(images/bg.png) left 0 no-repeat;
  22.    animation: proRotate 1.3s ease-in-out 500ms alternate none infinite;
  23. }
  27. @keyframes proRotate {
  28.    0%{transform:perspective(200px) rotateY(180deg);}
  29.    100%{transform:perspective(200px) rotateY(0deg);}
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="test_wrap">
  35.    <div class="cube"></div>
  37. </div>
  38. <body>
  39. </html>

2019-05-22-判断字符串是否为纯中文

参考链接：https://blog.csdn.net/wozaixiaoximen/article/details/48340061

2019-05-24

2019-05-27-针对 text 文本的属性举例

  1.     &_promote {
  2.         margin-left: 10px;
  3.         display: inline-block;
  4.         height: 20px;
  5.         padding: 4px;
  6.         line-height: 20px;
  7.         background: #fff0f0;
  8.         border-radius: 4px;
  9.         font-size: 20px;
  10.         color: #ff4142;
  11.         white-space: nowrap;
  12.         text-overflow: ellipsis;
  13.         overflow: hidden;
  14.         vertical-align: middle;
  15.     }

尤其要研究一下 vertical-align: middle;这个属性。

2019-06-11

已知某背景图片的尺寸是：586 931。现只截图图片的上面一部分区域（586 810）做展示。代码实现如下：

标签部分：

  2. <div class="img"> </div>

css部分：（重点是 background 属性的写法）

  1.   .img{
  2.       width: 586rpx;
  3.       height: 810rpx;
  4.       background: url('https://img11.360buyimg.com/jdphoto/s586x931_jfs/t1/27766/15/3237/102443/5c258955Ee307620e/21a744b0d2e065b3.png') 0 0/cover no-repeat;
  5.       margin: 0 auto;
  6.   }

2019-08-25

使用hover为div添加边框时，页面布局发生错位的解决办法：https://blog.csdn.net/u014033756/article/details/51049574