原生JS制作主页过程

我参考的是这位朋友的键盘样式：http://mcdlr.com/key-sheet/
这是我的作品效果图：

homepage.jpg

预览地址： https://zoeyhyt.github.io/HomePage/HomePage.html
我的github地址： https://github.com/Zoeyhyt/HomePage

一、JavaScript部分

（一） 生成键盘

• 批量生成和插入元素
  这里反复用到的代码主要就是以下两句：

  let tag = document.createElement(tag）//生成元素
  parent.appendChild(tag)//将生成的元素插入到父元素中
  

• 具体操作就是写一个哈希，哈希的子元素是五个数组，每个数组由同一行的字母（键盘）组成。遍历哈希中的每一个数组，生成不同数量的元素（这里我用的是li），赋予每个li不同的class或者id作为标记，依次插入到它的父元素中。

（二）储存用户输入的网址

首先在每个键盘按钮里插入一个button，然后监听用户的点击事件

button.onclick = function(a) {
    let name = a.target.className;
    let key = name.toLowerCase();
    let web = prompt("请输入网址,如www.qq.com");
    webs[key] = web;//将用户输入的网址存进专门用来存网址的数组
    //将这个数组存到本地储存中
    localStorage.setItem("webs", JSON.stringify(webs));
  };

（三）监听用户的键盘事件

当用户按下键盘按钮时，通过key来确定用户按下的到底是哪个按键，再从本地缓存中找到用户之前设置的网址。我这里设置的是在新窗口打开网页。

function listenToUser(webs){
document.onkeypress = function(a) {
  let key = a.key;
  let web = webs[key];
  window.open("http://" + web, "_blank");
};
}

（四）增加图标

• 在键盘按键中插入img标签

function creatImage(domain){
  let img = tag("img");//生成img
  if (domain) {
    img.src =
      "http://" + domain + "/favicon.ico";//获取图标
  } else {//用户未设置网址时默认设置的图标
    img.src = "//i.loli.net/2018/09/18/5ba11220913d6.jpg";
  }
  img.onerror = function(e) {//无法获取图标时使用默认图标
    e.target.src = "//i.loli.net/2018/09/18/5ba11220913d6.jpg";
  };
  return img
}

• 在上面监听用户键盘事件的代码中加入这几句,以在储存用户设置的网址的同时获取图标：

let img2 = a.target.nextSibling;
img2.src = "http://" + web + "/favicon.ico";
img.onerror = function(e) {
      e.target.src = "//i.loli.net/2018/09/18/5ba11220913d6.jpg";
    };

二、CSS部分

这个部分没什么太难的东西，就不详细描述了，只记录我碰到的几个难点：

（一）同一行元素内文字的font-size大小不一致，会导致该元素整体向上或向下偏移

原因：字体的对齐方式是基于基线对齐的，详见方应杭大神的分析：深入理解 CSS：字体度量、line-height 和 vertical-align
结论：由于字体对齐的时候vertical-align默认是baseline对齐，解决方法是将vertical-align设置为top/bottom或者text-top/text-bottom，让他们变为顶部/底部对齐。

（二）同一个键盘如shift有不同的排列格式

由于我是批量生成的元素，在增加css格式时会比较繁琐，所以css部分的代码显得比较冗杂，如果是直接写进HTML中代码应该会好看一些。