在前端开发中，经常需要制作各种交互组件来提高用户体验，其中数字键盘是一个常见的组件。本文将介绍如何使用原生 JavaScript 制作一个简单的数字键盘，并包含示例代码。
实现思路
我们将通过 HTML、CSS 和 JavaScript 来实现数字键盘。HTML 负责布局，CSS 控制样式，JavaScript 处理交互和逻辑。具体实现流程如下：
- 在 HTML 中创建一个容器 div，用于包裹数字键盘。
- 在该容器中创建若干个按钮 button 元素，每个按钮代表一个数字或其他功能键（例如退格键）。
- 使用 CSS 对数字键盘进行样式设置，使其看起来更加美观。
- 使用 JavaScript 监听按钮的点击事件，根据点击的按钮执行相应的逻辑操作。
HTML 结构
首先，让我们来创建 HTML 结构。代码如下：
-- -------------------- ---- ------- ---- -------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- -------------- -------------------- ------- ---------------- ------------------------- ------- -------------- -------------------- ------- ---------------- --------------------- ------
在这个代码中，我们创建了一个 id 为 "keyboard" 的 div 容器，并在其中包含了 12 个按钮元素。其中：
- 类名为 "number" 的按钮代表数字键。
- 类名为 "function" 的按钮代表其他功能键，例如退格和清除键。
- 每个按钮都有一个 value 属性，用于表示该按钮所代表的数字或符号。
CSS 样式
接下来，让我们来设置数字键盘的样式。代码如下：
-- -------------------- ---- ------- --------- - -------- ----- ---------------------- --------- ----- ---- ----- -------- ----- ----------------- -------- -------------- ---- - ------ - ------ ----- ------- ----- ---------- ----- ------ ----- ----------------- ----- ------- ----- -------------- ---- ------- -------- - ------------ - ----------------- ----- -
在这个代码中，我们使用了 CSS Grid 布局来实现数字键盘的排列。具体来说，我们使用 grid-template-columns: repeat(3, 1fr) 来定义了 3 列，并使用 gap: 10px 来设置按钮之间的间距。此外，我们还设置了一些其他样式，例如按钮的大小、颜色和鼠标悬停时的效果。
JavaScript 交互
最后，让我们来实现数字键盘的 JavaScript 交互。代码如下：
-- -------------------- ---- -------
----- -------- - ------------------------------------
----- ------- - --------------------------------
------------ - -------
------------------------------ ---------------------
---------------------------------- ------- -- -
----- ------ - -------------
----- ----- - -----------------------------
------ ------- -
---- ----
------------- - ---
------
---- ----
------------- - ---------------------- ----
------
--------
------------- -- ------
------
-
---在这个代码中，我们首先获取了 id 为 "keyboard" 的 div
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2784