每日前端签到（第九十三天）

第九十三天（2018-11-4）

• [html] HTML5怎么为输入框添加语音输入的功能呢？
• [css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写出来
• [js] 分别封装精确运算的加减乘除四个方法
• [软技能] 你有画过流程图吗？开始和判定分别用什么图形表示？

题目一：
<input type=”text” speech x-webkit-speech />
x-webkit-speech input 在 chrome 中已经废除了（没查到从哪个版本开始），不过本来这个也只是 chrome 的私有功能，不算 HTML5 规范。目前 chrome 中可以使用 JS 版的语音识别 API： https://caniuse.com/#search=speech%20recognition

这个 API 目前还在草案阶段： https://w3c.github.io/speech-api/

题目二：
图片等比缩放 img{ object-fit: cover/contain;}

div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现
图片设

max-width: 100%;
max-height: 100%;
div设

display: flex;
align-items: center;
jutify-content: center;
自适应缩放居中

扩展下一个完整的div包裹图片,在图片没加载完得时候坍缩现象
如果知道图片比例
包裹的div设padding-bottom: xx%; 如果16:9图片 那么这里就是 9/16%
因为padding是根据宽度自适应来设百分比的
可以图片absolute布局撑满div,
加载完前是padding撑起div
题目三：
function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}

/**

• 专门处理数字运算

• 并解决，1. 非数字型数字的运算 2. 小数计算的精度问题

• count('+', 0.1, '0.2'); // 0.3
  /
  function count(type, options) {
  var nums = [].slice.call(arguments, 2);
  var _startConfig = { '+': 0, '-': 0, '': 1, '/': 1 };
  if (!(type in _startConfig)) return new Error('首位入参有误');

  // 可能往后会加入些配置，但如果不是对象则不是配置
  if (!isObject(options)) {
  nums.splice(0, 0, options);
  }

  // 小数点后面最长字符长度，比如 0.1 和 0.234 则返回 3
  var maxDotLength = nums.reduce(function(max, num) {
  return Math.max(max, ([num].toString().split('.')[1] || '').length);
  }, 0);

  // 改造成整数，并计算出结果，比如 0.1 + 0.2 改为 1+2
  var startNum = _startConfig[type];
  var pow = Math.pow(10, maxDotLength);
  var result = nums.reduce(function(re, num, index) {
  num = Number(num) * pow;
  if (type === '-' && index === 0) return num;
  switch (type) {
  case '-': return re - num;
  case '*': return re * num;
  case '/': return re / num;
  case '+': default: return re + num;
  }
  }, startNum);

  // 回退到原小数形态，比如 3 转为 0.3
  var _divideConfig = { '+': pow, '-': pow, '*': pow * pow, '/': 1 };
  result = result / _divideConfig[type];

  return result;
  }
  题目四：
  function isObject(obj) {
  return Object.prototype.toString.call(obj) === '[object Object]';
  }

/**

• 专门处理数字运算

• 并解决，1. 非数字型数字的运算 2. 小数计算的精度问题

• count('+', 0.1, '0.2'); // 0.3
  /
  function count(type, options) {
  var nums = [].slice.call(arguments, 2);
  var _startConfig = { '+': 0, '-': 0, '': 1, '/': 1 };
  if (!(type in _startConfig)) return new Error('首位入参有误');

  // 可能往后会加入些配置，但如果不是对象则不是配置
  if (!isObject(options)) {
  nums.splice(0, 0, options);
  }

  // 小数点后面最长字符长度，比如 0.1 和 0.234 则返回 3
  var maxDotLength = nums.reduce(function(max, num) {
  return Math.max(max, ([num].toString().split('.')[1] || '').length);
  }, 0);

  // 改造成整数，并计算出结果，比如 0.1 + 0.2 改为 1+2
  var startNum = _startConfig[type];
  var pow = Math.pow(10, maxDotLength);
  var result = nums.reduce(function(re, num, index) {
  num = Number(num) * pow;
  if (type === '-' && index === 0) return num;
  switch (type) {
  case '-': return re - num;
  case '*': return re * num;
  case '/': return re / num;
  case '+': default: return re + num;
  }
  }, startNum);

  // 回退到原小数形态，比如 3 转为 0.3
  var _divideConfig = { '+': pow, '-': pow, '*': pow * pow, '/': 1 };
  result = result / _divideConfig[type];

  return result;
  }