利用前端技術實現隨機數字鍵盤的方法

譚秋平，余開朝

?

利用前端技術實現隨機數字鍵盤的方法

譚秋平，余開朝

（昆明理工大學機電工程學院，云南 昆明 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