隨機產生20個單詞

来源:http://www.cnblogs.com/Tiancheng-Duan/archive/2017/11/19/7724794.html
-Advertisement-
Play Games

隨機產生20個單詞 一、問題來源： 老師給了一份專業單詞word，說第二天要全背下來。錯了就五十遍啊五十遍。 然後，有人提出要做一個產生隨機單詞的Demo，來測試自己。 老師表示呵呵，做出來的就可以不用聽寫。 頓時，我就表示，是可忍，孰不可忍啊。這是在侮辱我們啊。這票我幹了，不能讓人看低了。我這麼做 ...


隨機產生20個單詞

一、問題來源：

　　老師給了一份專業單詞word，說第二天要全背下來。錯了就五十遍啊五十遍。

　　然後，有人提出要做一個產生隨機單詞的Demo，來測試自己。

　　老師表示呵呵，做出來的就可以不用聽寫。

　　頓時，我就表示，是可忍，孰不可忍啊。這是在侮辱我們啊。這票我幹了，不能讓人看低了。我這麼做絕對不是為了逃避五十遍，真的。

二、問題思考：

　　寫Demo之前，先思考一下這個程式的邏輯。

　　首先，我要導入數據，然後將數據轉化為便於使用的數據類型。

　　導入數據方面，我選擇了直接複製，然後以字元串的形式保存在一個數組內。當然，如果在實際使用中更方便。直接將伺服器端傳輸的JSON數據轉化就OK了。

　　數據轉換方面，我原本想著使用正則去識別。然而我發現WebStorm直接將空格和回車都轉化出來了。那就方便了。建立一個函數trans來將字元串a轉化為我們需要的Object數組。當然你也可以轉化為字元串數組。但是我認為轉化為Object數組後更易於理解與使用，也更符合邏輯。

　　在這之後就是從數組中挑選20個Object出來，顯示出來。這涉及到兩個問題，首先如何挑選，其次如何顯示。

　　顯示問題，太簡單了。直接做一個按鈕的監聽事件，每一次點擊都重新選取。記得每次選取前要初始化，即可。

　　

　　下麵就是這個Demo的最大看點，如何選取20不重覆的隨機數。當然這個問題，解決方法很多。常用的辦法有這兩種。（假設源數據數量為count）

　　一、建立一個大小為count的數組a，存儲的數據從min到max。然後，利用random()方法產生一個隨機數randomnumber，從數組a中抽取a[randomnumber]，保存在數組b中。之後每次抽取隨機數randomnumber，都在數組b中遍歷，是否存在。不過不存在就添加。直到數組b的length達到20。

　　二、建立一個大小為count的數組a，存儲的數據從min到max。然後，利用random()方法產生一個隨機數randomnumber，從數組a中抽取a[randomnumber]，保存在數組b中，同時將數組a中的a[randomnumber]刪除。直到數組b的length達到20。

　　上述方法中有一些JS才有的方法，可以加快效率。比如數組的Indexof()方法來查找元素等等。

 

　　當然，我的方法和上面有所不同。（否則我也不會這麼膨脹）方法如下：

　　建立一個大小為count的數組a，存儲的數據從min到max。然後，利用random()方法產生一個隨機數randomnumber，從數組a中抽取a[randomnumber]，保存在數組b中。與此同時，令數組c中c[randomnumber]=1。這樣每次產生隨機數後，只有在if(!c[randomnumber])條件成立，才向數組b內添加a[randomnumber]，同時，數組計數器+1。

　　雖然描寫看起來更麻煩一些，但是這樣就避免了查詢已產生隨機數的迴圈遍歷的資源消耗。

三、完整代碼：

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>random-words(20)</title>
  6     <script src="jquery-v1.12.4.js"></script>
  7     <script>
  8     let a = "continue\t繼續。程式設計中跳出當次迴圈的關鍵字。\n" +
  9             "break\t終止。程式設計中終止迴圈的關鍵字。\n" +
 10             "next\t下一個。\n" +
 11             "function\t函數。程式設計中定義函數的關鍵字。\n" +
 12             "return\t返回。程式設計中函數返回數據的關鍵字。\n" +
 13             "true\t真的\n" +
 14             "false\t假的\n" +
 15             "var\t定義變數關鍵字。\n" +
 16             "int\t整型。\n" +
 17             "boolean\t布爾型。\n" +
 18             "float\t浮點型數值。\n" +
 19             "double\t雙精度數值。\n" +
 20             "class\t類。定義類的關鍵字。\n" +
 21             "public\t公有的。\n" +
 22             "private\t私有的。\n" +
 23             "static\t靜態的。\n" +
 24             "super\t超級。代指面向對象編程中父級類。\n" +
 25             "this\t這個。一般指當前對象。\n" +
 26             "window\t視窗。DOM中的瀏覽器視窗對象。\n" +
 27             "document\t文檔。DOM中的文檔對象。\n" +
 28             "width\t寬度\n" +
 29             "height\t高度\n" +
 30             "first\t第一個。\n" +
 31             "last\t最後的。\n" +
 32             "parent\t父親，父級。\n" +
 33             "append\t追加。\n" +
 34             "before\t之前\n" +
 35             "after\t之後\n" +
 36             "focus\t焦點。CSS中的偽類名稱，常用於設計控制項獲得焦點時的效果\n" +
 37             "hover\t懸停。CSS中的偽類名稱，常用於設計滑鼠經過效果\n" +
 38             "select\t選擇。HTML中的下拉框標簽名\n" +
 39             "checkbox\t覆選框\n" +
 40             "submit\t提交\n" +
 41             "reset\t重置\n" +
 42             "click\t單擊事件\n" +
 43             "keyup\t鍵盤鬆開事件\n" +
 44             "keydown\t鍵盤按下事件\n" +
 45             "mouseup\t滑鼠鬆開或者彈起事件\n" +
 46             "mousedown\t滑鼠按下事件\n" +
 47             "empty\t空的\n" +
 48             "remove\t移除\n" +
 49             "array\t數組\n" +
 50             "show\t顯示\n" +
 51             "hide\t隱藏\n" +
 52             "animate\t動畫。jQuery中的自定義動畫方法。\n" +
 53             "event\t事件\n" +
 54             "replace\t替換\n" +
 55             "join\t數組方法之一，將元素合併成字元串\n" +
 56             "split\t字元串方法之一，將字元串切割成數組\n" +
 57             "splice\t數組方法之一，可增、刪、改元素\n" +
 58             "underline\t下劃線\n" +
 59             "fixed\t定位元素的樣式屬性值之一，固定定位\n" +
 60             "position\t定位元素的樣式屬性名\n" +
 61             "align\t對齊方式\n" +
 62             "background\t設置元素背景的屬性名\n" +
 63             "display\t顯示\n" +
 64             "solid\t邊框線條樣式值之一，實線類型\n" +
 65             "clear\t清除，清理\n" +
 66             "element\t元素\n" +
 67             "home\t家，或首頁\n" +
 68             "middle\t中間的，垂直居中樣式值\n" +
 69             "center\t水平居中\n" +
 70             "button\t按鈕\n" +
 71             "hidden\t被隱藏的\n" +
 72             "important\t重要的，提升樣式的優先順序\n" +
 73             "margin\t元素外邊距屬性名\n" +
 74             "object\t對象\n" +
 75             "transform\t變換，設置CSS3變換的樣式屬性名稱\n" +
 76             "relative\t相對的，定位屬性值之一的相對定位\n" +
 77             "arguments\t參數集合，LESS混合中或者JS函數中代表參數集合\n" +
 78             "method\t方法\n" +
 79             "action\t動作，表單form的屬性之一\n" +
 80             "number\t數字或數值，JavaScript中的數據類型之一\n" +
 81             "translate\t平移，用於設置元素的位置\n" +
 82             "padding\t元素內間距屬性名\n" +
 83             "source\t來源\n" +
 84             "control\t控制或控制項\n" +
 85             "video\t視頻，H5新增播放視頻的標簽名\n" +
 86             "default\t預設的，預設的\n" +
 87             "container\t容器\n" +
 88             "content\t內容\n" +
 89             "textarea\t文本輸入域的標簽名稱\n" +
 90             "current\t當前的\n" +
 91             "visited\t已經訪問過的\n" +
 92             "inner\t內部的\n" +
 93             "outer\t外部的\n" +
 94             "client\t客戶端\n" +
 95             "location\t位置，定位\n" +
 96             "instance\t實例\n" +
 97             "prototype\t原型對象\n" +
 98             "property\t屬性\n" +
 99             "constructor\t構造函數\n" +
100             "innerWidth\t內部寬度\n" +
101             "prepend\t在元素內部前置插入元素\n" +
102             "trigger\t主動觸發事件\n" +
103             "triggerHandler\t主動觸發事件，但不觸發瀏覽器預設事件\n" +
104             "fadeIn\t淡入動畫方法\n" +
105             "fadeOut\t淡出動畫方法\n" +
106             "currentTarget\t總是指向事件監聽目標對象\n" +
107             "focusin\t元素獲得焦點時觸發事件的方法\n";
108     </script>
109     <style>
110         .container{
111             border     : 5px solid #333333;
112             padding    : 30px;
113             background : sandybrown;
114         }
115         .top-container{
116             width: 100%;
117             height: 50px;
118         }
119         .headtitle{
120             display: block;
121             float: left;
122             position: relative;
123             width: 300px;
124             font-size: 24px;
125             text-align : center;
126         }
127         .ebuttom{
128             display: block;
129             float: left;
130             top:5px;
131             left: 20%;
132             position: relative;
133             width: 200px;
134             font-size: 20px;
135             text-align : center;
136             background: lightgrey;
137             border-radius: 5px;
138             box-shadow: 0px 1px 1px;
139 
140         }
141         .but-container{
142             width: 100%;
143             height: 50px;
144             position: relative;
145             top:20px;
146         }
147         .content{
148             width: 100%;
149             height:480px;
150             position: relative;
151             top:20px;
152             font-size: 18px;
153         }
154         .word{
155             display: block;
156             float: left;
157             position: relative;
158             width:20%;
159             text-align : center;
160         }
161         .explain{
162             display: block;
163             float: left;
164             position: relative;
165             width: 80%;
166             text-align : center;
167         }
168         .title{
169             font-size: 20px;
170         }
171         .content>.explain{
172             left:10%;
173             text-align: left;
174         }
175     </style>
176 </head>
177 <body>
178     <div class="container">
179 
180         <div class="top-container">
181             <div class="headtitle">專業單詞測試</div>
182             <div class="ebuttom" onclick="changewordlist()">產生隨機單詞</div>
183         </div>
184         <!--<h2 class="word">單詞</h2>-->
185         <!--<div class="explain">解釋</div>-->
186         <div class="but-container">
187             <div class="title word">單詞</div>
188             <div class="title explain">解釋</div>
189         </div>
190 
191     </div>
192 
193     <script>
194     let wordsBase = new Array();
195     let count=20;
196     let wordlistf=new Array();
197
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript基本知識點整理（超實用）
    絮叨絮叨 今天給大家分享一下這兩天自己整理的JavaScript部分的筆記，下麵都是我覺得比較常用的，希望能幫助到大家！ 1、 導入JS的三種方式 ①在HTML標簽中，直接內嵌JS。<button onclick=”func()”></button> ②在HTML頁面中使用<script></scr ...
  • 提交圖片校檢
    目的：在提交表單之前用JavaScript檢查下是不是圖片文件以及大小 註：match() 方法可在字元串內檢索指定的值，或找到一個或多個正則表達式的匹配。該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值（存放匹配結果的數組），而不是字元串的位置。 ...
  • JS - Array.slice 與 Array.splice
    1）Array.slice方法 1.1）接收兩個參數： a：起始下標 b：結束下標 1.2）返回由a（包括）至b（不包括）的元素所組成的數組，若一個參數都不傳，則返回由全部元素組成的數組。 1.3）該方法執行不影響原數組元素。 1.4）範例圖： 2）Array.splice方法 2.1）接收若幹參數 ...
  • 前端實習生面試題分析（二）
    本篇是關於手寫代碼的題目。 1.實現一個trim函數 關於性能的寫法也不多說了，只是用最直觀的寫法來寫一下，使用正則有大概五六種寫法，感興趣可以自己去研究下，推薦《高性能JavaScript》 1.正則實現 trim leftTrim rightTrim 2.非正則實現 trim leftTrim ...
  • web前端經典小題
    1.此題涉及的知識點眾多，包括變數定義提升、this指針指向、運算符優先順序、原型、繼承、全局變數污染、對象屬性及原型屬性優先順序等等。 function Foo() { getName = function () { console.log(1) }; return this; } Foo.getNa ...
  • 一些重要的學習資料
    正則表達式.zip http://pan.baidu.com/s/1dDmE0uP用AngularJS開發下一代Web應用.zip http://pan.baidu.com/s/1eQfkMMA掌握Ajax全書CHM版.zip http://pan.baidu.com/s/1sjOPBNv微軟Jav ...
  • 通過nodejs將less文件轉為css文件
    已經安裝過nodejs 1，安裝less； dos界面下進入node.js安裝目錄，通過命令npm install less –g 全局進行安裝less.（安裝過程可能需要等待一段時間） 2、先在控制台編譯一遍：lessc 文件路徑\文件名.less（可省略）； 3、在dos界面輸入：文件路徑\文件 ...
  • nodejs文件運行
    電腦中已經安裝nodejs。 cmd進入dos界面，輸入文件路徑；然後輸入>node 文件名.js ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類