譚秋平，余開朝

?

利用前端技術(shù)實(shí)現(xiàn)隨機(jī)數(shù)字鍵盤的方法

譚秋平，余開朝

（昆明理工大學(xué)機(jī)電工程學(xué)院，云南 昆明 650504）

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，各種企業(yè)以及個(gè)人都相繼建立起網(wǎng)站以實(shí)現(xiàn)在線溝通和宣傳的作用，由此對(duì)網(wǎng)頁(yè)質(zhì)量的要求也越來越高。網(wǎng)頁(yè)質(zhì)量包括網(wǎng)頁(yè)配色，布局，用戶體驗(yàn)度，交互性以及特效等。本文中所展示的隨機(jī)數(shù)字鍵盤在網(wǎng)頁(yè)中也有著廣泛的應(yīng)用。如在輸入密碼時(shí)，鍵盤上每次刷新的數(shù)字隨機(jī)排列順序能使用戶在不同時(shí)間輸入相同密碼點(diǎn)擊的按鈕位置不同，從而保證了安全性和用戶隱私。在HTML、CSS、JavaScript三大前端語(yǔ)言的支持下，本文中的隨機(jī)數(shù)字鍵盤得以實(shí)現(xiàn)。

隨機(jī)數(shù)字鍵盤；前端；HTML；CSS；JavaScript

0 引言

Web前端開發(fā)技術(shù)是基于網(wǎng)頁(yè)制作誕生的一種全新的開發(fā)技術(shù)，具有濃厚的時(shí)代特征，與網(wǎng)頁(yè)制作技術(shù)相比，Web前端開發(fā)技術(shù)有著顯著的差異，前者只會(huì)顯示靜態(tài)東西，進(jìn)入到Web 2.0時(shí)代之后，人們對(duì)于網(wǎng)頁(yè)提出了更高的要求，傳統(tǒng)網(wǎng)頁(yè)制作技術(shù)開始難以滿足人們的需求，而Web前端開發(fā)技術(shù)得到了普遍性的應(yīng)用和推廣。隨著Web技術(shù)的不斷進(jìn)步和網(wǎng)頁(yè)技術(shù)普及，各式各樣的Web設(shè)計(jì)將受到越來越多的Web設(shè)計(jì)師的青睞[1]。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，各種企業(yè)以及個(gè)人都相繼建立起網(wǎng)站以實(shí)現(xiàn)在線溝通和宣傳的作用，由此對(duì)網(wǎng)頁(yè)質(zhì)量的要求也越來越高。網(wǎng)頁(yè)質(zhì)量包括網(wǎng)頁(yè)配色，布局，用戶體驗(yàn)度，交互性以及特效等。隨機(jī)數(shù)字鍵盤有數(shù)字鍵盤的基本功能，即點(diǎn)擊數(shù)字按鈕時(shí)文本框中出現(xiàn)對(duì)應(yīng)的數(shù)字。還有重置鍵盤數(shù)字排布的功能，即點(diǎn)擊重置按鈕后鍵盤上的十個(gè)數(shù)字會(huì)以亂序的方式進(jìn)行重新分布，以體現(xiàn)隨機(jī)的效果。目前網(wǎng)頁(yè)中的隨機(jī)數(shù)字鍵盤大多用于信息安全方面[2-3]，比如密碼輸入。而現(xiàn)有的數(shù)字鍵盤有以下兩個(gè)問題：一是數(shù)字鍵盤沒有重置功能，用戶輸入密碼時(shí)每次都點(diǎn)擊相同的位置，這樣容易形成信息安全隱患；二是可以使用亂序數(shù)字鍵盤輸入但沒有一鍵重置鍵盤數(shù)字的功能，用戶想重置數(shù)字時(shí)只能退出輸入后重新打開鍵盤，這無疑降低了用戶體驗(yàn)度。本文中展示的數(shù)字鍵盤解決了以上兩個(gè)問題，使得用戶可以使用隨機(jī)鍵盤輸入數(shù)字的同時(shí)也可以隨時(shí)一鍵重置鍵盤上的數(shù)字分布，即能保護(hù)用戶信息的安全性，防止隱私泄露，也可以增強(qiáng)用戶在網(wǎng)頁(yè)使用中的交互體驗(yàn)性。

在HTML、CSS、JavaScript三大前端語(yǔ)言的支持下，本文中的隨機(jī)數(shù)字鍵盤得以實(shí)現(xiàn)。其中HTML搭建總體框架，CSS用來控制網(wǎng)頁(yè)外觀的規(guī)則，增加網(wǎng)頁(yè)的多種外觀效果，包括透明、陰影等，吸引更多體驗(yàn)用戶進(jìn)行訪問[4]。JavaScript則完成實(shí)現(xiàn)頁(yè)面效果的基本算法，JavaScript文件還保證了頁(yè)面布局文件與算法代碼的分離。一直以來Javascript語(yǔ)言已經(jīng)是前端技術(shù)的核心語(yǔ)言。并且，近些年Javascript開發(fā)服務(wù)器端程序也被企業(yè)廣泛的應(yīng)用[5]。通過HTML、CSS以及JavaScript前端三大件的支持，可實(shí)現(xiàn)網(wǎng)頁(yè)中大多數(shù)的頁(yè)面效果，也包括本文中的隨機(jī)數(shù)字鍵盤的實(shí)現(xiàn)。

1 隨機(jī)數(shù)字鍵盤實(shí)現(xiàn)原理

在HTML文件中建立div容器，專門接收隨機(jī)數(shù)字按鈕。在生成數(shù)字按鈕的算法中，先建立一維數(shù)組，其中數(shù)組元素依次為0到9十個(gè)數(shù)字，按從小到大的順序排列。利用for循環(huán)和Math.random()方法將數(shù)組中的數(shù)字隨機(jī)提取出來并無遺漏地放在新數(shù)組中，使得新數(shù)組中的元素為0到9十個(gè)數(shù)字且為亂序排列。再次利用循環(huán)新建input元素，并將該元素的樣式屬性設(shè)置為button，新數(shù)組中的元素依次設(shè)為按鈕的value值，最后將新建立好的十個(gè)數(shù)字按鈕作為div的子元素放入容器中，形成最終的隨機(jī)數(shù)字鍵盤。點(diǎn)擊數(shù)字按鈕后即可將對(duì)應(yīng)數(shù)字加到文本框已有的value值之后，實(shí)現(xiàn)所有被點(diǎn)擊的數(shù)字依次出現(xiàn)在文本框中，而將文本框的value值設(shè)為空，可實(shí)現(xiàn)清除數(shù)字的效果。刷新頁(yè)面時(shí)鍵盤上的數(shù)字會(huì)重新隨機(jī)排序，據(jù)此可實(shí)現(xiàn)重置鍵盤的效果。

2 隨機(jī)數(shù)字鍵盤效果概述

該效果從上而下共分為三部分：文本框、清除和重置按鈕以及數(shù)字鍵盤。每次打開時(shí)鍵盤上的數(shù)字以亂序排列達(dá)到隨機(jī)效果。點(diǎn)擊鍵盤中的任意按鈕，文本框中出現(xiàn)相應(yīng)的數(shù)字，繼續(xù)點(diǎn)擊數(shù)字按鈕后文本框中的數(shù)字不會(huì)被覆蓋并會(huì)接著顯示在文本框中。點(diǎn)擊清除按鈕，文本框中的內(nèi)容會(huì)被清除。點(diǎn)擊重置按鈕，鍵盤上的數(shù)字會(huì)被重新分布排列。

3 編程語(yǔ)言介紹

3.1 HTML標(biāo)準(zhǔn)

HTML（Hyper Text Mark-up Language）即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言，它主要用于編寫網(wǎng)頁(yè)，由標(biāo)記（Tag）與屬性（Attribute）所組成，瀏覽器只要看到HTML標(biāo)記與屬性就能將其解析成網(wǎng)頁(yè)，所以HTML也可以說是組合成一個(gè)文本文件的一系列標(biāo)簽。HTML語(yǔ)言的目的是為了能讓所有的用戶都能得到一致的信息，不會(huì)因硬件、軟件、網(wǎng)絡(luò)基礎(chǔ)設(shè)施、母語(yǔ)、文化、地理位置等而有任何分別。

3.2 CSS樣式

CSS的英文全稱是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱樣式表，它是一種制作網(wǎng)頁(yè)的便捷技術(shù)。它的主要用途如下：可以輕松地控制頁(yè)面的布局；使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目；你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地修改；以前一些非得通過圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而可以更快地下載頁(yè)面;在幾乎所有的瀏覽器上都可以使用。正是層疊樣式表卓越的功能使得它在現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中得到了廣泛的推廣與應(yīng)用。

3.3 JavaScript技術(shù)

JavaScript是Web上的一種功能強(qiáng)大的編程語(yǔ)言，用于開發(fā)交互式的Web頁(yè)面。它不僅可以直接應(yīng)用于HTML文檔以獲得交互效果或其他動(dòng)態(tài)效果，而且可以運(yùn)行于服務(wù)器端，從而替代傳統(tǒng)的CGI程序。JavaScript是一種腳本編寫語(yǔ)言，也是一種解釋性語(yǔ)言。JavaScript采用小程序段的方式實(shí)現(xiàn)編程，與HTML代碼結(jié)合在一起，通常由瀏覽器解釋執(zhí)行，提供了一個(gè)簡(jiǎn)易的開發(fā)過程。JavaScript技術(shù)最為優(yōu)質(zhì)的特征在于能夠利用很小的程序完成大量任務(wù)，不需要對(duì)高性能計(jì)算機(jī)以及Web服務(wù)器通道進(jìn)行應(yīng)用，而在軟件方面則只需要一個(gè)瀏覽器以及字處理軟件即可，可以制作出只依靠HTML所無法呈現(xiàn)出的非常優(yōu)質(zhì)的動(dòng)態(tài)視覺效應(yīng)。

4 隨機(jī)數(shù)字鍵盤具體實(shí)現(xiàn)

4.1 HTML布局

本例中HTML布局分為四部分，第一個(gè)input標(biāo)簽的類型為text，即為文本框，類名為input，id名為txt。第二和第三個(gè)input標(biāo)簽類型均為button按鈕。第一個(gè)button按鈕作用為清除文本框中的內(nèi)容，類名為clear，按鈕上的字為“清除”，點(diǎn)擊該按鈕后執(zhí)行clearnum()函數(shù)；第二個(gè)button按鈕作用為重置數(shù)字鍵盤，類名為new，按鈕上的字為“重置鍵盤”，點(diǎn)擊該按鈕后執(zhí)行cz()函數(shù)。最后一部分為數(shù)字鍵盤分布，設(shè)置div容器，通過JavaScript中的算法將隨機(jī)數(shù)字鍵盤的按鈕插入到容器中，div容器的類名為div，id名為div1。

4.2 CSS樣式

首先設(shè)置input標(biāo)簽的樣式，這里的input不僅包含HTML中已經(jīng)設(shè)置的input標(biāo)簽，也包括要插入div容器中數(shù)字鍵盤button所在的input標(biāo)簽。input標(biāo)簽的CSS樣式為：寬高均為30 px，用border- radius設(shè)置圓角邊框，四個(gè)角的圓角半徑均為20 px，外邊距margin為2 px，利用outline: none;清除元素周圍的輪廓樣式。

其次設(shè)置div容器的樣式。div容器寬為120 px，高為150 px，內(nèi)邊距為10 px，text-align: center；設(shè)置容器中的元素居中顯示，在背景顏色的設(shè)置中，rgb分別為180、90、30，透明度為0.3，容器的邊框?qū)傩詾榇旨?xì)2 px，實(shí)線且顏色為橙色。

接著對(duì)顯示數(shù)字的文本框進(jìn)行設(shè)置，寬為130 px，高為20 px。

最后設(shè)置清除和重置鍵盤兩個(gè)按鈕，寬為60 px，利用 font-size設(shè)置button上的字體大小為12 px。

4.3 JavaScript算法

5 結(jié)語(yǔ)

本文使用HTML、CSS、JavaScript前端三大件實(shí)現(xiàn)了可隨機(jī)排列的數(shù)字鍵盤，并且具有清除所選數(shù)字的功能。在JavaScript設(shè)置的函數(shù)中，調(diào)用生成隨機(jī)數(shù)的函數(shù)來選擇數(shù)組中的元素，并且插入到新的數(shù)組中。將新數(shù)組中已經(jīng)隨機(jī)排列好的數(shù)字逐一放入頁(yè)面展示鍵盤的容器中。通過這樣的思路實(shí)現(xiàn)了數(shù)字鍵盤的隨機(jī)排列。

隨著web前端的發(fā)展，人們對(duì)網(wǎng)頁(yè)效果的要求也會(huì)越來越高。當(dāng)前，Web前端開發(fā)已經(jīng)成為研究熱點(diǎn)，為了滿足不同站點(diǎn)的可用性要求，并且提高產(chǎn)品的用戶體驗(yàn)，各種以“用戶體驗(yàn)”為向?qū)У膱F(tuán)隊(duì)迅速發(fā)展，并且開發(fā)團(tuán)隊(duì)中的職位分工也更加明確，如交互設(shè)計(jì)師、用戶體驗(yàn)分析師、前端開發(fā)工程師、網(wǎng)頁(yè)設(shè)計(jì)師等主要設(shè)計(jì)開發(fā)應(yīng)用的前端。對(duì)于Web前端開發(fā)者來說，需要掌握的技術(shù)也日趨復(fù)雜，例如熟悉W3C標(biāo)準(zhǔn)，深刻理解Web語(yǔ)義化、表現(xiàn)與數(shù)據(jù)分離等；了解后臺(tái)開發(fā)、算法、數(shù)據(jù)結(jié)構(gòu)等；熟悉頁(yè)面架構(gòu)和布局，精通CSS，HTML等網(wǎng)頁(yè)制作技術(shù)，精通Javascript等Web開發(fā)技術(shù)。隨著技術(shù)的發(fā)展，前端開發(fā)技術(shù)將會(huì)不斷完善，HTML5，CSS 4.0等技術(shù)將會(huì)成為前端開發(fā)的主流技術(shù)，即使HTML5成為現(xiàn)實(shí)，也將會(huì)有更多的前端開發(fā)技術(shù)出現(xiàn)，前端的發(fā)展也會(huì)出現(xiàn)一個(gè)又一個(gè)新的高潮。

[1] 臧進(jìn)進(jìn), 鄂海紅. 基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)生成系統(tǒng)研究與實(shí)現(xiàn)[J]. 軟件, 2015, 36(6): 37-41

[2] 王永建, 徐楊, 王迅, 等. 面向平安城市的視頻監(jiān)控前端呼叫設(shè)計(jì)研究[J]. 軟件, 2016, 37(4): 101-106

[3] 曾程勝. 實(shí)現(xiàn)Javascript-Delphi高強(qiáng)度加密傳輸安全[J]. 軟件, 2018, 39(1): 173-179

[4] 周芷儀, 陳婷. 淺談網(wǎng)頁(yè)中實(shí)現(xiàn)圖片輪播圖效果的方法[J]. 軟件, 2018, 39(10): 187-191.

[5] 榮艷冬. 以崗位需求為導(dǎo)向的Javascript課程構(gòu)建[J]. 軟件, 2015, 36(06): 18-20.

[6] 杜濤. CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用與優(yōu)化[J]. 長(zhǎng)治學(xué)院學(xué)報(bào), 2007(05): 35-37.

[7] 張?jiān)圃? JavaScript在動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J]. 科技信息, 2007(05): 23-24.

[8] 王暉媛. 淺談HTML[J]. 計(jì)算機(jī)光盤軟件與應(yīng)用, 2010, (11): 157-157.

[9] 張萃. Web前端開發(fā)技術(shù)與優(yōu)化措施[J]. 中國(guó)管理信息化, 2017, 20(22): 153-154.

[10] 袁婷. 淺談Web前端開發(fā)[J]. 無線互聯(lián)科技, 2017(02): 35-36.

[11] 高梓健. JavaScript技術(shù)在網(wǎng)頁(yè)中的應(yīng)用分析[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-)，男，研究生在讀，昆明理工大學(xué)，主要研究方向：生產(chǎn)及制造系統(tǒng)工程，服務(wù)運(yùn)作系統(tǒng)工程以及企業(yè)信息化工程；余開朝(1962-)，男，教授，昆明理工大學(xué)，主要研究方向：生產(chǎn)及制造系統(tǒng)工程，服務(wù)運(yùn)作系統(tǒng)工程以及企業(yè)信息化工程。

譚秋平，余開朝. 利用前端技術(shù)實(shí)現(xiàn)隨機(jī)數(shù)字鍵盤的方法[J]. 軟件，2018，39（12）：107-110