利用前端技术实现随机数字键盘的方法

谭秋平，余开朝



利用前端技术实现随机数字键盘的方法

谭秋平，余开朝

（昆明理工大学机电工程学院，云南 昆明 650504）

随着互联网技术的发展，各种企业以及个人都相继建立起网站以实现在线沟通和宣传的作用，由此对网页质量的要求也越来越高。网页质量包括网页配色，布局，用户体验度，交互性以及特效等。本文中所展示的随机数字键盘在网页中也有着广泛的应用。如在输入密码时，键盘上每次刷新的数字随机排列顺序能使用户在不同时间输入相同密码点击的按钮位置不同，从而保证了安全性和用户隐私。在HTML、CSS、JavaScript三大前端语言的支持下，本文中的随机数字键盘得以实现。

随机数字键盘；前端；HTML；CSS；JavaScript

0 引言

Web前端开发技术是基于网页制作诞生的一种全新的开发技术，具有浓厚的时代特征，与网页制作技术相比，Web前端开发技术有着显著的差异，前者只会显示静态东西，进入到Web 2.0时代之后，人们对于网页提出了更高的要求，传统网页制作技术开始难以满足人们的需求，而Web前端开发技术得到了普遍性的应用和推广。随着Web技术的不断进步和网页技术普及，各式各样的Web设计将受到越来越多的Web设计师的青睐[1]。随着互联网技术的发展，各种企业以及个人都相继建立起网站以实现在线沟通和宣传的作用，由此对网页质量的要求也越来越高。网页质量包括网页配色，布局，用户体验度，交互性以及特效等。随机数字键盘有数字键盘的基本功能，即点击数字按钮时文本框中出现对应的数字。还有重置键盘数字排布的功能，即点击重置按钮后键盘上的十个数字会以乱序的方式进行重新分布，以体现随机的效果。目前网页中的随机数字键盘大多用于信息安全方面[2-3]，比如密码输入。而现有的数字键盘有以下两个问题：一是数字键盘没有重置功能，用户输入密码时每次都点击相同的位置，这样容易形成信息安全隐患；二是可以使用乱序数字键盘输入但没有一键重置键盘数字的功能，用户想重置数字时只能退出输入后重新打开键盘，这无疑降低了用户体验度。本文中展示的数字键盘解决了以上两个问题，使得用户可以使用随机键盘输入数字的同时也可以随时一键重置键盘上的数字分布，即能保护用户信息的安全性，防止隐私泄露，也可以增强用户在网页使用中的交互体验性。

在HTML、CSS、JavaScript三大前端语言的支持下，本文中的随机数字键盘得以实现。其中HTML搭建总体框架，CSS用来控制网页外观的规则，增加网页的多种外观效果，包括透明、阴影等，吸引更多体验用户进行访问[4]。JavaScript则完成实现页面效果的基本算法，JavaScript文件还保证了页面布局文件与算法代码的分离。一直以来Javascript语言已经是前端技术的核心语言。并且，近些年Javascript开发服务器端程序也被企业广泛的应用[5]。通过HTML、CSS以及JavaScript前端三大件的支持，可实现网页中大多数的页面效果，也包括本文中的随机数字键盘的实现。

1 随机数字键盘实现原理

在HTML文件中建立div容器，专门接收随机数字按钮。在生成数字按钮的算法中，先建立一维数组，其中数组元素依次为0到9十个数字，按从小到大的顺序排列。利用for循环和Math.random()方法将数组中的数字随机提取出来并无遗漏地放在新数组中，使得新数组中的元素为0到9十个数字且为乱序排列。再次利用循环新建input元素，并将该元素的样式属性设置为button，新数组中的元素依次设为按钮的value值，最后将新建立好的十个数字按钮作为div的子元素放入容器中，形成最终的随机数字键盘。点击数字按钮后即可将对应数字加到文本框已有的value值之后，实现所有被点击的数字依次出现在文本框中，而将文本框的value值设为空，可实现清除数字的效果。刷新页面时键盘上的数字会重新随机排序，据此可实现重置键盘的效果。

2 随机数字键盘效果概述

该效果从上而下共分为三部分：文本框、清除和重置按钮以及数字键盘。每次打开时键盘上的数字以乱序排列达到随机效果。点击键盘中的任意按钮，文本框中出现相应的数字，继续点击数字按钮后文本框中的数字不会被覆盖并会接着显示在文本框中。点击清除按钮，文本框中的内容会被清除。点击重置按钮，键盘上的数字会被重新分布排列。

3 编程语言介绍

3.1 HTML标准

HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，它主要用于编写网页，由标记（Tag）与属性（Attribute）所组成，浏览器只要看到HTML标记与属性就能将其解析成网页，所以HTML也可以说是组合成一个文本文件的一系列标签。HTML语言的目的是为了能让所有的用户都能得到一致的信息，不会因硬件、软件、网络基础设施、母语、文化、地理位置等而有任何分别。

3.2 CSS样式

CSS的英文全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的便捷技术。它的主要用途如下：可以轻松地控制页面的布局；使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目；你可以将许多网页的风格格式同时更新，不用再一页一页地修改；以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而可以更快地下载页面;在几乎所有的浏览器上都可以使用。正是层叠样式表卓越的功能使得它在现在网页设计中得到了广泛的推广与应用。

3.3 JavaScript技术

JavaScript是Web上的一种功能强大的编程语言，用于开发交互式的Web页面。它不仅可以直接应用于HTML文档以获得交互效果或其他动态效果，而且可以运行于服务器端，从而替代传统的CGI程序。JavaScript是一种脚本编写语言，也是一种解释性语言。JavaScript采用小程序段的方式实现编程，与HTML代码结合在一起，通常由浏览器解释执行，提供了一个简易的开发过程。JavaScript技术最为优质的特征在于能够利用很小的程序完成大量任务，不需要对高性能计算机以及Web服务器通道进行应用，而在软件方面则只需要一个浏览器以及字处理软件即可，可以制作出只依靠HTML所无法呈现出的非常优质的动态视觉效应。

4 随机数字键盘具体实现

4.1 HTML布局

本例中HTML布局分为四部分，第一个input标签的类型为text，即为文本框，类名为input，id名为txt。第二和第三个input标签类型均为button按钮。第一个button按钮作用为清除文本框中的内容，类名为clear，按钮上的字为“清除”，点击该按钮后执行clearnum()函数；第二个button按钮作用为重置数字键盘，类名为new，按钮上的字为“重置键盘”，点击该按钮后执行cz()函数。最后一部分为数字键盘分布，设置div容器，通过JavaScript中的算法将随机数字键盘的按钮插入到容器中，div容器的类名为div，id名为div1。

4.2 CSS样式

首先设置input标签的样式，这里的input不仅包含HTML中已经设置的input标签，也包括要插入div容器中数字键盘button所在的input标签。input标签的CSS样式为：宽高均为30 px，用border- radius设置圆角边框，四个角的圆角半径均为20 px，外边距margin为2 px，利用outline: none;清除元素周围的轮廓样式。

其次设置div容器的样式。div容器宽为120 px，高为150 px，内边距为10 px，text-align: center；设置容器中的元素居中显示，在背景颜色的设置中，rgb分别为180、90、30，透明度为0.3，容器的边框属性为粗细2 px，实线且颜色为橙色。

接着对显示数字的文本框进行设置，宽为130 px，高为20 px。

最后设置清除和重置键盘两个按钮，宽为60 px，利用 font-size设置button上的字体大小为12 px。

4.3 JavaScript算法

5 结语

本文使用HTML、CSS、JavaScript前端三大件实现了可随机排列的数字键盘，并且具有清除所选数字的功能。在JavaScript设置的函数中，调用生成随机数的函数来选择数组中的元素，并且插入到新的数组中。将新数组中已经随机排列好的数字逐一放入页面展示键盘的容器中。通过这样的思路实现了数字键盘的随机排列。

随着web前端的发展，人们对网页效果的要求也会越来越高。当前，Web前端开发已经成为研究热点，为了满足不同站点的可用性要求，并且提高产品的用户体验，各种以“用户体验”为向导的团队迅速发展，并且开发团队中的职位分工也更加明确，如交互设计师、用户体验分析师、前端开发工程师、网页设计师等主要设计开发应用的前端。对于Web前端开发者来说，需要掌握的技术也日趋复杂，例如熟悉W3C标准，深刻理解Web语义化、表现与数据分离等；了解后台开发、算法、数据结构等；熟悉页面架构和布局，精通CSS，HTML等网页制作技术，精通Javascript等Web开发技术。随着技术的发展，前端开发技术将会不断完善，HTML5，CSS 4.0等技术将会成为前端开发的主流技术，即使HTML5成为现实，也将会有更多的前端开发技术出现，前端的发展也会出现一个又一个新的高潮。

[1] 臧进进, 鄂海红. 基于响应式Web设计的网页生成系统研究与实现[J]. 软件, 2015, 36(6): 37-41

[2] 王永建, 徐杨, 王迅, 等. 面向平安城市的视频监控前端呼叫设计研究[J]. 软件, 2016, 37(4): 101-106

[3] 曾程胜. 实现Javascript-Delphi高强度加密传输安全[J]. 软件, 2018, 39(1): 173-179

[4] 周芷仪, 陈婷. 浅谈网页中实现图片轮播图效果的方法[J]. 软件, 2018, 39(10): 187-191.

[5] 荣艳冬. 以岗位需求为导向的Javascript课程构建[J]. 软件, 2015, 36(06): 18-20.

[6] 杜涛. CSS技术在网页设计中的应用与优化[J]. 长治学院学报, 2007(05): 35-37.

[7] 张云苑. JavaScript在动态网页设计中的应用[J]. 科技信息, 2007(05): 23-24.

[8] 王晖媛. 浅谈HTML[J]. 计算机光盘软件与应用, 2010, (11): 157-157.

[9] 张萃. Web前端开发技术与优化措施[J]. 中国管理信息化, 2017, 20(22): 153-154.

[10] 袁婷. 浅谈Web前端开发[J]. 无线互联科技, 2017(02): 35-36.

[11] 高梓健. JavaScript技术在网页中的应用分析[J]. 电脑迷, 2018(01): 11.

A Method of Realizing Random Numeric Keypad by Using Front-end technology

TAN Qiu-ping, YU Kai-chao

(College of Mechanical and Electrical Engineering, Kunming University of Science & Technology, Kunming 650500, China)

With the development of Internet technology, all kinds of enterprises and individuals have set up websites to realize online communication and publicity, thus the right implementation of the quality of the web pages is getting higher and higher than ever. Web page quality includes web color matching, layout, user experience, interaction and special effects. The random numeric keypad displayed in this paper is also widely used in web pages. For example, when entering a password, the keyboard every time the number appears in a random order to enable users to enter the same password at different times click on the button position is different, thus ensuring security and user privacy. With the support of HTML, CSS and JavaScript, the random number keyboard in this paper is realized.

Random Numeric Keypad; Front-end; HTML; CSS; JavaScript

TP311.1

A

10.3969/j.issn.1003-6970.2018.12.025

谭秋平(1994-)，男，研究生在读，昆明理工大学，主要研究方向：生产及制造系统工程，服务运作系统工程以及企业信息化工程；余开朝(1962-)，男，教授，昆明理工大学，主要研究方向：生产及制造系统工程，服务运作系统工程以及企业信息化工程。

谭秋平，余开朝. 利用前端技术实现随机数字键盘的方法[J]. 软件，2018，39（12）：107-110