制作背景

当时为了练手，重温html和css语法，在仿写百度界面的网页，同时学习了一些js的基础，打算将百度网页中的二级菜单鼠标事件效果也做出来。于是就做了这样一个js。其实我个人并不知道百度二级菜单是怎样实现的，我只是用我想的方式来实现。

效果动态图源代码（最初）

/** * 实现js控制二级菜单效果 * by littlefean * 2020年10月24日 *//*** 给两个元素绑定事件，一个按钮，一个面板，将这两个元素组成一个二级菜单效果* @param {*} btn 按钮元素* @param {*} panel 面板元素* @author littlefean*/function setSecondaryMenu(btn, panel) {    /**     * 原理：     * 鼠标放到按钮上，面板显示出来，鼠标移出按钮，面板延迟消失。     * 在面板显示出来的基础上鼠标移动到面板上，面板永不消失。     * 在面板显示出来的基础上鼠标移出面板区域，面板立刻消失。     */    /**鼠标移开按钮后面板延迟消失的时间 */    var derTaTime = 0.3;    /**面板元素是否显示了出来 */    var isPanelShow = false;    /**鼠标是否在两个元素之外 */    var isMouseOut = true;    /**此时间将一直增加 */    var time = 0;    /**移出按钮的时刻 */    var tOutBtn = time;    /**移入面板的时刻 */    var tInPanel = time;    //开启一个时时刻刻增加秒数的计时器    setInterval(function () {        time += 0.1;        console.log("now:" + time);        console.log("out:" + tOutBtn);        console.log("in:" + tInPanel);        if (time - tOutBtn > derTaTime && isMouseOut) {            panel.style.opacity = 0;        }    }, 100);    /**鼠标移入按钮 */    btn.onmouseover = function () {        isPanelShow = true;        isMouseOut = false;        panel.style.opacity = 1;    }    /**鼠标移出按钮 */    btn.onmouseleave = function () {        isMouseOut = true;        panel.style.opacity = 1;        tOutBtn = time;    }    /**鼠标移入面板 */    panel.onmouseover = function () {        isMouseOut = false;        tInPanel = time;        //在移入面板前先进行判断，如果是在规定的时间差值内移入，则能够将面板显示出来        if (tInPanel - tOutBtn < derTaTime) {            panel.style.opacity = 1;        }    }    /**鼠标移出面板 */    panel.onmouseleave = function () {        isMouseOut = true;        panel.style.opacity = 0;        isPanelShow = false;    }}

声明：此代码为好友Rutubet所更改，相比以前的代码逻辑更加清晰，更加简洁。我也因此get到很多东西。在此十分感谢Rutubet。

/*** 给两个元素绑定事件，一个按钮，一个面板，将这两个元素组成一个二级菜单效果* @param {*} btn 按钮元素* @param {*} panel 面板元素* @param {*} dt 毫秒(ms)* @author littlefean, rutubet*/function setSecondaryMenu(btn, panel, dt) {    /**     * 原理：     * 鼠标放到按钮上，面板显示出来，鼠标移出按钮，面板延迟dt毫秒消失。     * 鼠标移出后，面板消失之前，移动到面板上，取消面板的延迟消失     * 鼠标移出面板后，同样延时dt毫秒消失     */    /**鼠标移开按钮后面板延迟消失的时间(ms) */    var delayTask;    /**鼠标移入按钮 */    btn.addEventListener("mouseover", () => panel.hidden = false);    /**鼠标移出按钮 */    btn.addEventListener("mouseleave", () => delayTask = setTimeout(() => panel.hidden = true, dt));    /**鼠标移入面板 */    panel.addEventListener("mouseover", () => clearTimeout(delayTask));    /**鼠标移出面板 */    panel.addEventListener("mouseleave", () => delayTask = setTimeout(() => panel.hidden = true, dt));}

解决：想问题之前需要多查阅文档，直接去搜某个东西网上给出各种乱七八糟的答案，可能不如直接查api准确，更好。

箭头表达式 是匿名函数的一种简洁写法

解决：需要多了解js，查阅文档

注意避免多余的声明变量 解决：做之前要有好的思路，自己想多声明变量来做的时候先冷静一下，先对编写代码有一个大致思路方向，这个大致思路方向要考虑的全面，然后再开始进行具体实施。做完一遍之后最好要再检查一下变量。注意变量名拼写，如deltaTime，Word和World不分 解决：态度要更好一些，遇到不会的名字搜一搜，不能自己臆想，随便。