2019-04-05 14:32:05 +08:00
|
|
|
|
|
|
|
|
|
|
### 2019-04-02
|
|
|
|
|
|
|
|
|
|
|
|
Vue屏幕宽度自适应：
|
|
|
|
|
|
|
|
|
|
|
|
<https://blog.csdn.net/qq_25386583/article/details/77161478>
|
|
|
|
|
|
|
|
|
|
|
|
<https://blog.csdn.net/xuaner8786/article/details/81565219>
|
|
|
|
|
|
|
2019-04-12 22:45:11 +08:00
|
|
|
|
### 2019-04-07
|
|
|
|
|
|
|
|
|
|
|
|
- 控制iframe中的页面只显示一部分：<https://blog.csdn.net/iteye_18722/article/details/81918563>
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-04-09
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
Date.parse("2019/04/20 18:14:00")
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
上方代码转换的结果，单位是`毫秒`，不是秒。
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-04-25 11:23:17 +08:00
|
|
|
|
### 2019-04-23
|
2019-04-12 22:45:11 +08:00
|
|
|
|
|
2019-04-25 11:23:17 +08:00
|
|
|
|
```javascript
|
|
|
|
|
|
const a = [];
|
|
|
|
|
|
const b = {};
|
|
|
|
|
|
|
|
|
|
|
|
console.log(Boolean(a));
|
|
|
|
|
|
console.log(Boolean(b));
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
上方代码的打印结果均为true。 具体解释，可以看我在 `03-JavaScript基础/03-变量的强制类型转换.md`这篇文章里讲到的**转换为Boolean**。
|
2019-04-05 14:32:05 +08:00
|
|
|
|
|
2019-04-25 11:23:17 +08:00
|
|
|
|
所以，我们平时在写业务代码的时候，“判断是否为空对象/空数组”，不能直接写成 `if (myObj)`或者`if(myArray)`，会踩坑。
|
2019-04-05 14:32:05 +08:00
|
|
|
|
|
2019-04-25 11:23:17 +08:00
|
|
|
|
判断不否为空数组，可以用：
|
2019-04-05 14:32:05 +08:00
|
|
|
|
|
2019-04-25 11:23:17 +08:00
|
|
|
|
```javascript
|
|
|
|
|
|
if (myArray.length)
|
|
|
|
|
|
```
|
2019-04-05 14:32:05 +08:00
|
|
|
|
|
2019-04-25 11:23:17 +08:00
|
|
|
|
判断不为空对象，可以用 ：
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
if (JSON.stringify(myObj) !== '{}')
|
2019-04-28 12:52:06 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-04-26
|
|
|
|
|
|
|
|
|
|
|
|
我们知道，在移动端页面尅发时，单位一般是采用 rem。
|
|
|
|
|
|
|
|
|
|
|
|
设计稿如果是750px宽，那么，默认换算的单位如下：**16px = 1rem**。但是这种换算比较麻烦。我们可以在 html里加上如下代码：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<style>
|
|
|
|
|
|
html {
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
font-size: 5.3333333vw;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
这样的话，换算单位就变成了：**20px = 1rem**。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-06-01 19:04:38 +08:00
|
|
|
|
### 2019-05-16
|
2019-04-28 12:52:06 +08:00
|
|
|
|
|
2019-06-01 19:04:38 +08:00
|
|
|
|
- 数组随机打乱顺序：<https://www.zhihu.com/question/68330851/answer/262111061>
|
2019-04-28 12:52:06 +08:00
|
|
|
|
|
2019-06-01 19:04:38 +08:00
|
|
|
|
最佳的打乱算法是Fisher-Yates算法。
|
2019-04-28 12:52:06 +08:00
|
|
|
|
|
|
|
|
|
|
|
2019-06-01 19:04:38 +08:00
|
|
|
|
### 2019-05-16
|
2019-04-28 12:52:06 +08:00
|
|
|
|
|
2019-06-01 19:04:38 +08:00
|
|
|
|
Vue的全局变量空间：`this.$root.data`，我们可以在这里面存放数据。比如`this.$root.data.skuIdList`。
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-05-17
|
|
|
|
|
|
|
|
|
|
|
|
- css 动画实现闪烁效果：<https://blog.csdn.net/wangxiuyan0228/article/details/80701523>
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-05-20-css3动画水平/镜像翻转
|
|
|
|
|
|
|
|
|
|
|
|
参考链接1：<https://www.oschina.net/question/2443483_247744>
|
|
|
|
|
|
|
|
|
|
|
|
代码实现举例：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head lang="en">
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
@keyframes featuresicon {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
transform: scaleX(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
20% {
|
|
|
|
|
|
transform: scaleX(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
|
transform: scaleX(0);
|
|
|
|
|
|
}
|
|
|
|
|
|
80% {
|
|
|
|
|
|
transform: scaleX(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
|
|
|
transform: scaleX(1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cube {
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
background: url(images/bg2.png) left 0 no-repeat;
|
|
|
|
|
|
|
|
|
|
|
|
animation: featuresicon 1.3s linear alternate none infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
background-color: cornflowerblue;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="cube"></div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
参考链接2：<https://blog.csdn.net/wjnf012/article/details/78679131>
|
|
|
|
|
|
|
|
|
|
|
|
代码实现：（立体感更强一点）
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
*{
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cube{
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
/* background-color: #9a6ad8 */
|
|
|
|
|
|
background: url(images/bg.png) left 0 no-repeat;
|
|
|
|
|
|
animation: proRotate 1.3s ease-in-out 500ms alternate none infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes proRotate {
|
|
|
|
|
|
0%{transform:perspective(200px) rotateY(180deg);}
|
|
|
|
|
|
100%{transform:perspective(200px) rotateY(0deg);}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="test_wrap">
|
|
|
|
|
|
<div class="cube"></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-05-22-判断字符串是否为纯中文
|
|
|
|
|
|
|
|
|
|
|
|
参考链接：https://blog.csdn.net/wozaixiaoximen/article/details/48340061
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-05-24
|
|
|
|
|
|
|
|
|
|
|
|
- VScode代码格式化后不符合ESLint风格问题处理：<https://blog.csdn.net/SilenceJude/article/details/81589784>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 2019-05-27-针对 text 文本的属性举例
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
&_promote {
|
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
padding: 4px;
|
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
background: #fff0f0;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
color: #ff4142;
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
尤其要研究一下 `vertical-align: middle;`这个属性。
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-06-14 11:35:23 +08:00
|
|
|
|
### 2019-06-11
|
|
|
|
|
|
|
|
|
|
|
|
已知某背景图片的尺寸是：586 * 931。现只截图图片的上面一部分区域（586 * 810）做展示。代码实现如下：
|
|
|
|
|
|
|
|
|
|
|
|
标签部分：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
|
|
|
|
|
|
<div class="img"> </div>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
css部分：（重点是 background 属性的写法）
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
.img{
|
|
|
|
|
|
width: 586rpx;
|
|
|
|
|
|
height: 810rpx;
|
|
|
|
|
|
background: url('https://img11.360buyimg.com/jdphoto/s586x931_jfs/t1/27766/15/3237/102443/5c258955Ee307620e/21a744b0d2e065b3.png') 0 0/cover no-repeat;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-09-03 10:09:04 +08:00
|
|
|
|
### 2019-08-25
|
2019-06-14 11:35:23 +08:00
|
|
|
|
|
2019-09-03 10:09:04 +08:00
|
|
|
|
使用hover为div添加边框时，页面布局发生错位的解决办法：https://blog.csdn.net/u014033756/article/details/51049574
|
2019-06-14 11:35:23 +08:00
|
|
|
|
|
2019-04-28 12:52:06 +08:00
|
|
|
|
|
