怪物属性

姓名，种类，体型，肉质（弱点），栖息地，介绍，图，html name, kind, body, weakness, habitat, intro, img, table/list

// 模板
Mons[''] = {
    'kind':    '',
    'body': '大型',
    'weakness': '未知',
    'habitat': '',
    'intro': ``
};

// 示例
Mons['艾露'] = {
    'kind':    '兽人种',
    'body': '小型',
    'weakness': '未知',
    'habitat': '大社遗迹/寒冷群岛/沙原/水没林/熔岩洞',
    'intro': `外貌形似猫的兽人族。
特征为白毛。
平常虽然很温和，但是遭到攻击时便会大发雷霆，不分青红皂白地发动攻击。
好奇心旺盛，部分族群会制作料理招待人类，或是受公会雇用协助猎人。
依此可见似乎也有能够理解人话，融入人类社会的个体。`
};

待办

优先级递减

• TOP图标
• 页脚置底
• 搜索框基本功能
• 模糊搜索（按名字，毕竟种类已经有按钮了）
• 增加列表/表格切换按钮，整个小图标
• 修改表格样式
• 分类按钮被选中后应该换个颜色
• 搜索框增加回车搜索
• 搜索框下边加一个小菜单可以显示多个搜索结果（现在是实时显示内容，我觉得也不错吧，还简单。）
• 换肤（日/夜），图片：放大镜，TOP猫猫，换配色(#7987BF …) (主要是修改style.backgroundColor啥的，体力活吧) (能不能直接加一层灰色蒙版实现亮度降低？)
• 修改返回顶部方式，增加过渡动画
• 毛玻璃主题😭😭

问题&解决

🔹有背景图片的时候，fixed图标（艾路猫TOP）跟着滑动了，咋也想不通…最近的非stastic祖先明明就是body

🔹Cannot set property ‘innerHTML’ of null at buttonCheck 结果原因是把内外层元素一个是id一个是class都叫【table】，还搞反了

🔹footer置底

给内容主体设定个最小高度就行：min-height: 300px

高级点： min-height: calc(100vh - xxx);

参考：

CSS五种方式实现 Footer 置底

🔹js实现搜索功能

感觉看源码就是了（技术含量0）

模糊搜索：Mons[key]['name'].indexOf(K)>=0

参考（内容都在里边了）：

即时反应的input和propertychange方法 - 小白点 - 博客园

用js实现模糊查询的几种方法 - 简书

前端做模糊搜索 - SegmentFault 思否