js数据结构

字数统计: 935字   |   阅读时长: 3分

数据类型的判断

  1. typeof

    typeof是经常使用的一种数据判断方式,可以准确判断基本数据类型(除了null,会被判断为Object),因为在早期的js中,数据类型是根据机器码的前三位来判断的,前三位为0的就是Object,而null正好全部位数都为0. typeof除了判断函数正确,其余都会被判断为Objcet.所以一般用来判断基本数据类型.

展开全文 >>

元素水平,垂直居中的几种方式

字数统计: 541字   |   阅读时长: 2分

1.—元素绝对定位,外边距自适应
html

1
2
3
4
5
<div class="father">
  <div class="son">
    元素绝对定位,外边距自适应
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.father {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid red;
}
.son{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border: 1px solid green;

}

2.—元素绝对定位,外边距取负值
html

1
2
3
4
5
<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.father {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid red;
}
.son{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
  border: 1px solid green;

}

这里有个问题,为什么采取margin-left，margin-top,
待解决：margin-right,margin-bottom,自己试了下，没有效果.

3.—元素绝对定位,平移自身

html

1
2
3
4
5
<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.father {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid red;
}
.son{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid green;

}

4.—table布局
display:table：此元素会作为一个表格单元格显示（类似 td 和 th）

html

1
2
3
4
5
<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
  width: 500px;
  height: 200px;
  display: table-cell;
  border: 1px solid red;
  text-align: center;
  vertical-align: middle;
}
.son{
  width: 200px;
  height: 100px;
  display: inline-block;
  border: 1px solid green;

}

5.—flex布局

html

1
2
3
4
5
<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
.father {
  width: 500px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  border: 1px solid green;

}

6.—grid布局

html

1
2
3
4
5
<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
.father {
  width: 500px;
  height: 200px;
  display: grid;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  border: 1px solid green;

}

小结

行内元素：

  • 水平居中：text-align:center
  • 垂直居中: 设置height=line-height

块级元素

  • 无脑flex布局

展开全文 >>

echarts实现疫情可视化

字数统计: 1.5k字   |   阅读时长: 7分

已实现的功能

  • 地图下钻，国省市三级联动
  • 疫情趋势可视化

展开全文 >>

实现无缝轮播图

字数统计: 811字   |   阅读时长: 4分

前言

最近在项目中遇到了轮播图的需求，以往都是直接上框架就完事了。但想想自己还是应该多练练手

思路

  1. 确立样式
    • 父容器限制宽高，超出部分隐藏，设置为弹性布局
    • 子容器利用 flex-shrink: 0 保证容器不被缩小
    • 加上左移，右移按钮和轮播图指示器

pic1.png

  1. 图片滚动
    • 设置一个滚动变量currentIndex(从0开始)，表示当前展示的是第几张
    • 设置setInterval让滚动变量自增，并在生命周期函数中调用
    • 设置一个计算属性，返回值为每次滚动的距离：(子容器的宽度+外边距)*滚动变量

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

学海无涯