CSS 系列文章 —— 内联元素与流

2020-08-27

一、x-height

1、是什么: 指小写字母 x 的高度，术语描述就是基线和等分线(mean line)(也称作中线，midline)之间的距离

阅读全文

CSS 系列文章——CSS 基础知多少

2020-08-27

一、CSS 是怎么组织的

先看一段 demo：

.icon {
  width: 20px;
  height: 30px;
  border-radius: 4px;
}

阅读全文

CSS 系列文章——CSS历史及文档流

2020-08-27

一、CSS 简史

1、1994 年被提议

2、1996 年 W3C 正式推出 CSS1

3、1998 年 W3C 正式推出 CSS2，推行内容和表现分离，table 布局开始没落

阅读全文

科普

2020-08-13

1、西北太平洋生成的热带气旋叫做”台风”（typhoon），其他海域生成的叫做”飓风”（hurricane）

2、通常情况下，经济增长一定伴随资源消耗的增长和自然环境的压力。一旦经济进入成熟阶段以后，增长可能会带来资源消耗的减少。

3、非暴力交流

阅读全文

一些概念

2020-08-13

不要构建系统，而要构建子系统

这就像 Unix 哲学：每个工具做好一件事，不同的工具协同工作。

阅读全文

美句摘抄

2020-08-13

新海诚电影的诗意

  • 樱花落下的速度是每秒五厘米， 我该用怎么样的速度，才能与你相遇。——秒速五厘米

阅读全文

数字精确到小数点两位

2020-08-12

分析

对 js 有一定了解的人都知道，js 的数字精确度比较低，这就有必要自己去实现一套精确度高的算法了，精确到小数点后几位，是我们经常会用到的，比如价格的计算等，下面来讲讲这个算法的步骤

阅读全文

计算电饭煲的预约时间

2020-08-12

首先要确定预约的时间是指什么，是开始的时间，还是煮好之后的时间，如果是煮好之后的时间，就要在时间差的基础上减去煮好所需的时间，否则就是当前时间和期望时间的差。

demo

function formatTime(timeStamp) {
  const date = new Date(timeStamp);
  const day = [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds()
  ];
  return day;
}
// @param reservationTime:预约时间
// @param startTime：开始预约时间
// @param cookTime：需要煮的时长
function reservation({ reservationTime, startTime, cookTime }) {
  const date = new Date();
  const tomrrow = formatTime(date.getTime() + 24 * 60 * 60 * 1000);
  const tomrrowTime = `${tomrrow[0]}/${tomrrow[1]}/ ${tomrrow[2]}  ${reservationTime}`;
  const now = formatTime(date.getTime());
  const setTime = startTime
    ? `${now[0]}/${now[1]}/ ${now[2]}  ${startTime}`
    : date.getTime();
  const distance = new Date(tomrrowTime) - new Date(setTime) || date;
  const cook = cookTime.split(":");

  return [
    distance / 1000 / 60 / 60 + +cook[0],
    ((distance / 1000 / 60) % 60) + +cook[1],
    ((distance / 1000) % 60) + +cook[2]
  ];
}

const time = reservation({
  reservationTime: "6:30:00",
  // startTime: "23:30:00",
  cookTime: "01:10:00"
});
const res = `${Math.floor(time[0])}:${time[1].toFixed()}:${time[2].toFixed()}`;
console.log(res);

阅读全文

常见 Git 工作流程

2020-08-10

一、简单的 Git 工作流程

简单的 Git 工作流程图

阅读全文

说说 Vuex

2020-08-10

一、为什么要说 Vuex

上周在做项目的时候，有一个模块用到了一个章节组件，一个 content 组件，其中章节组件调用了一个 tree 组价用来递归章节列表。选中章节组件中的项，需要更新到 content 的已选章节部分，取消章节选项，已选章节也需要删除对应的项，此外，删除已选章节中的某一项，也需要更新左侧章节列表，比如这样：

阅读全文