每日前端签到（第104天）

第104天（2018-11-16）

• [html] HTML如何创建分区响应图？
• [css] 你有用过table布局吗？说说你的感受
• [js] 请用js编写一个红绿灯程序
• [软技能] 淘宝、京东、百度他们的网站首页秒开是如何做到的呢？

题目一：
分区响应图:一张图片,分成多个模块,点击模块可以链接到不同的URL地址,
实现;
使用map,area

  <p>
    <img src="./1.png" usemap="#myMap" />
  </p>
  <map name="myMap">
    <area href="http://baidu.com" shape="rect" coords="50,106,220,273" />
    <area href="http://google.com" shape="rect" coords="260,106,430,275" />
    <area href="http://juejin.im" shape="default" />
  </map>

题目二：
table 布局比较坑的是td，tr比较多，比较烦人，review代码很难分清哪个是哪个
题目三：

function sleep (t) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, t)
  })
}

/**
 * 循环显示红绿灯
 * @param {number} green 绿灯显示毫秒数
 * @param {number} yellow 黄灯显示毫秒数
 * @param {number} red 红灯显示毫秒数
 */
async function light (green = 15000, yellow = 3000, red = 10000) {
  let status = 'green'
  while (true) {
    await sleep(green).then(() => {
      status = 'yellow'
      console.log(status)
    })
    await sleep(yellow).then(() => {
      status = 'red'
      console.log(status)
    })
    await sleep(red).then(() => {
      status = 'green'
      console.log(status)
    })
  }
}

light(3000, 1000, 1000)

题目四：
懒加载，可以从这篇文章了解