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

譚秋平，余開朝

?

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

譚秋平，余開朝

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

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

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

0 引言

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

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

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

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

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

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

3 編程語言介紹

3.1 HTML標準

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

3.2 CSS樣式

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

3.3 JavaScript技術(shù)

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

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

4.1 HTML布局

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

4.2 CSS樣式

首先設(shè)置input標簽的樣式，這里的input不僅包含HTML中已經(jīng)設(shè)置的input標簽，也包括要插入div容器中數(shù)字鍵盤button所在的input標簽。input標簽的CSS樣式為：寬高均為30 px，用border- radius設(shè)置圓角邊框，四個角的圓角半徑均為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ū)傩詾榇旨? px，實線且顏色為橙色。

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

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

4.3 JavaScript算法

5 結(jié)語

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

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

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

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

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

[4] 周芷儀, 陳婷. 淺談網(wǎng)頁中實現(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)頁設(shè)計中的應(yīng)用與優(yōu)化[J]. 長治學(xué)院學(xué)報, 2007(05): 35-37.

[7] 張云苑. JavaScript在動態(tài)網(wǎng)頁設(shè)計中的應(yīng)用[J]. 科技信息, 2007(05): 23-24.

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

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

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

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

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