随机产生20个单词
隨機(jī)產(chǎn)生20個(gè)單詞
一、問題來源：
老師給了一份專業(yè)單詞word，說第二天要全背下來。錯(cuò)了就五十遍啊五十遍。
然后，有人提出要做一個(gè)產(chǎn)生隨機(jī)單詞的Demo，來測(cè)試自己。
老師表示呵呵，做出來的就可以不用聽寫。
頓時(shí)，我就表示，是可忍，孰不可忍啊。這是在侮辱我們啊。這票我干了，不能讓人看低了。我這么做絕對(duì)不是為了逃避五十遍，真的。
二、問題思考：
寫Demo之前，先思考一下這個(gè)程序的邏輯。
首先，我要導(dǎo)入數(shù)據(jù)，然后將數(shù)據(jù)轉(zhuǎn)化為便于使用的數(shù)據(jù)類型。
導(dǎo)入數(shù)據(jù)方面，我選擇了直接復(fù)制，然后以字符串的形式保存在一個(gè)數(shù)組內(nèi)。當(dāng)然，如果在實(shí)際使用中更方便。直接將服務(wù)器端傳輸?shù)腏SON數(shù)據(jù)轉(zhuǎn)化就OK了。
數(shù)據(jù)轉(zhuǎn)換方面，我原本想著使用正則去識(shí)別。然而我發(fā)現(xiàn)WebStorm直接將空格和回車都轉(zhuǎn)化出來了。那就方便了。建立一個(gè)函數(shù)trans來將字符串a(chǎn)轉(zhuǎn)化為我們需要的Object數(shù)組。當(dāng)然你也可以轉(zhuǎn)化為字符串?dāng)?shù)組。但是我認(rèn)為轉(zhuǎn)化為Object數(shù)組后更易于理解與使用，也更符合邏輯。
在這之后就是從數(shù)組中挑選20個(gè)Object出來，顯示出來。這涉及到兩個(gè)問題，首先如何挑選，其次如何顯示。
顯示問題，太簡單了。直接做一個(gè)按鈕的監(jiān)聽事件，每一次點(diǎn)擊都重新選取。記得每次選取前要初始化，即可。
下面就是這個(gè)Demo的最大看點(diǎn)，如何選取20不重復(fù)的隨機(jī)數(shù)。當(dāng)然這個(gè)問題，解決方法很多。常用的辦法有這兩種。（假設(shè)源數(shù)據(jù)數(shù)量為count）
一、建立一個(gè)大小為count的數(shù)組a，存儲(chǔ)的數(shù)據(jù)從min到max。然后，利用random()方法產(chǎn)生一個(gè)隨機(jī)數(shù)randomnumber，從數(shù)組a中抽取a[randomnumber]，保存在數(shù)組b中。之后每次抽取隨機(jī)數(shù)randomnumber，都在數(shù)組b中遍歷，是否存在。不過不存在就添加。直到數(shù)組b的length達(dá)到20。
二、建立一個(gè)大小為count的數(shù)組a，存儲(chǔ)的數(shù)據(jù)從min到max。然后，利用random()方法產(chǎn)生一個(gè)隨機(jī)數(shù)randomnumber，從數(shù)組a中抽取a[randomnumber]，保存在數(shù)組b中，同時(shí)將數(shù)組a中的a[randomnumber]刪除。直到數(shù)組b的length達(dá)到20。
上述方法中有一些JS才有的方法，可以加快效率。比如數(shù)組的Indexof()方法來查找元素等等。
?
當(dāng)然，我的方法和上面有所不同。（否則我也不會(huì)這么膨脹）方法如下：
建立一個(gè)大小為count的數(shù)組a，存儲(chǔ)的數(shù)據(jù)從min到max。然后，利用random()方法產(chǎn)生一個(gè)隨機(jī)數(shù)randomnumber，從數(shù)組a中抽取a[randomnumber]，保存在數(shù)組b中。與此同時(shí)，令數(shù)組c中c[randomnumber]=1。這樣每次產(chǎn)生隨機(jī)數(shù)后，只有在if(!c[randomnumber])條件成立，才向數(shù)組b內(nèi)添加a[randomnumber]，同時(shí)，數(shù)組計(jì)數(shù)器 1。
雖然描寫看起來更麻煩一些，但是這樣就避免了查詢已產(chǎn)生隨機(jī)數(shù)的循環(huán)遍歷的資源消耗。
三、完整代碼：
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繼續(xù)。程序設(shè)計(jì)中跳出當(dāng)次循環(huán)的關(guān)鍵字。\n" 9 "break\t終止。程序設(shè)計(jì)中終止循環(huán)的關(guān)鍵字。\n" 10 "next\t下一個(gè)。\n" 11 "function\t函數(shù)。程序設(shè)計(jì)中定義函數(shù)的關(guān)鍵字。\n" 12 "return\t返回。程序設(shè)計(jì)中函數(shù)返回?cái)?shù)據(jù)的關(guān)鍵字。\n" 13 "true\t真的\n" 14 "false\t假的\n" 15 "var\t定義變量關(guān)鍵字。\n" 16 "int\t整型。\n" 17 "boolean\t布爾型。\n" 18 "float\t浮點(diǎn)型數(shù)值。\n" 19 "double\t雙精度數(shù)值。\n" 20 "class\t類。定義類的關(guān)鍵字。\n" 21 "public\t公有的。\n" 22 "private\t私有的。\n" 23 "static\t靜態(tài)的。\n" 24 "super\t超級(jí)。代指面向?qū)ο缶幊讨懈讣?jí)類。\n" 25 "this\t這個(gè)。一般指當(dāng)前對(duì)象。\n" 26 "window\t窗口。DOM中的瀏覽器窗口對(duì)象。\n" 27 "document\t文檔。DOM中的文檔對(duì)象。\n" 28 "width\t寬度\n" 29 "height\t高度\n" 30 "first\t第一個(gè)。\n" 31 "last\t最后的。\n" 32 "parent\t父親，父級(jí)。\n" 33 "append\t追加。\n" 34 "before\t之前\n" 35 "after\t之后\n" 36 "focus\t焦點(diǎn)。CSS中的偽類名稱，常用于設(shè)計(jì)控件獲得焦點(diǎn)時(shí)的效果\n" 37 "hover\t懸停。CSS中的偽類名稱，常用于設(shè)計(jì)鼠標(biāo)經(jīng)過效果\n" 38 "select\t選擇。HTML中的下拉框標(biāo)簽名\n" 39 "checkbox\t復(fù)選框\n" 40 "submit\t提交\n" 41 "reset\t重置\n" 42 "click\t單擊事件\n" 43 "keyup\t鍵盤松開事件\n" 44 "keydown\t鍵盤按下事件\n" 45 "mouseup\t鼠標(biāo)松開或者彈起事件\n" 46 "mousedown\t鼠標(biāo)按下事件\n" 47 "empty\t空的\n" 48 "remove\t移除\n" 49 "array\t數(shù)組\n" 50 "show\t顯示\n" 51 "hide\t隱藏\n" 52 "animate\t動(dòng)畫。jQuery中的自定義動(dòng)畫方法。\n" 53 "event\t事件\n" 54 "replace\t替換\n" 55 "join\t數(shù)組方法之一，將元素合并成字符串\n" 56 "split\t字符串方法之一，將字符串切割成數(shù)組\n" 57 "splice\t數(shù)組方法之一，可增、刪、改元素\n" 58 "underline\t下劃線\n" 59 "fixed\t定位元素的樣式屬性值之一，固定定位\n" 60 "position\t定位元素的樣式屬性名\n" 61 "align\t對(duì)齊方式\n" 62 "background\t設(shè)置元素背景的屬性名\n" 63 "display\t顯示\n" 64 "solid\t邊框線條樣式值之一，實(shí)線類型\n" 65 "clear\t清除，清理\n" 66 "element\t元素\n" 67 "home\t家，或首頁\n" 68 "middle\t中間的，垂直居中樣式值\n" 69 "center\t水平居中\(zhòng)n" 70 "button\t按鈕\n" 71 "hidden\t被隱藏的\n" 72 "important\t重要的，提升樣式的優(yōu)先級(jí)\n" 73 "margin\t元素外邊距屬性名\n" 74 "object\t對(duì)象\n" 75 "transform\t變換，設(shè)置CSS3變換的樣式屬性名稱\n" 76 "relative\t相對(duì)的，定位屬性值之一的相對(duì)定位\n" 77 "arguments\t參數(shù)集合，LESS混合中或者JS函數(shù)中代表參數(shù)集合\n" 78 "method\t方法\n" 79 "action\t動(dòng)作，表單form的屬性之一\n" 80 "number\t數(shù)字或數(shù)值，JavaScript中的數(shù)據(jù)類型之一\n" 81 "translate\t平移，用于設(shè)置元素的位置\n" 82 "padding\t元素內(nèi)間距屬性名\n" 83 "source\t來源\n" 84 "control\t控制或控件\n" 85 "video\t視頻，H5新增播放視頻的標(biāo)簽名\n" 86 "default\t默認(rèn)的，缺省的\n" 87 "container\t容器\n" 88 "content\t內(nèi)容\n" 89 "textarea\t文本輸入域的標(biāo)簽名稱\n" 90 "current\t當(dāng)前的\n" 91 "visited\t已經(jīng)訪問過的\n" 92 "inner\t內(nèi)部的\n" 93 "outer\t外部的\n" 94 "client\t客戶端\n" 95 "location\t位置，定位\n" 96 "instance\t實(shí)例\n" 97 "prototype\t原型對(duì)象\n" 98 "property\t屬性\n" 99 "constructor\t構(gòu)造函數(shù)\n" 100 "innerWidth\t內(nèi)部寬度\n" 101 "prepend\t在元素內(nèi)部前置插入元素\n" 102 "trigger\t主動(dòng)觸發(fā)事件\n" 103 "triggerHandler\t主動(dòng)觸發(fā)事件，但不觸發(fā)瀏覽器默認(rèn)事件\n" 104 "fadeIn\t淡入動(dòng)畫方法\n" 105 "fadeOut\t淡出動(dòng)畫方法\n" 106 "currentTarget\t總是指向事件監(jiān)聽目標(biāo)對(duì)象\n" 107 "focusin\t元素獲得焦點(diǎn)時(shí)觸發(fā)事件的方法\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">專業(yè)單詞測(cè)試</div> 182 <div class="ebuttom" onclick="changewordlist()">產(chǎn)生隨機(jī)單詞</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 /** 198 * 用于將基礎(chǔ)的字符串轉(zhuǎn)換為需要的Object數(shù)組 199 * @ps 由于我們是通過\n來分解字符串，而字符串最后有一個(gè)/n，所以length得減一。 200 * a [string] 201 * return Array 202 */ 203 function trans( a ) 204 { 205 206 let wordesArray = a.split( "\n" ); 207 208 for( let i = 0; i < wordesArray.length - 1; i ) 209 { 210 let wordArray = wordesArray[ i ].split( "\t" ); 211 let word = wordArray[ 0 ]; 212 let explain = wordArray[ 1 ]; 213 let wordBase = { 214 word: word, 215 explain: explain 216 }; 217 wordsBase.push( wordBase ); 218 } 219 return wordsBase; 220 } 221 wordsBase=trans(a); 222 223 /** 224 * 用于從min到max中輸出count個(gè)不重復(fù)隨機(jī)數(shù)字。 225 * @param count number 226 * @param min number 227 * @param max number 228 */ 229 function norepeatRandom( count, min, max ) 230 { 231 let resultArray = []; 232 // resultArray.length = 20; 233 let markArray = []; 234 // markArray.length = 100; 235 // console.log(1,resultArray.length,markArray.length); 236 //確保可以取到max 237 let range = max - min 1; 238 for( let i = 0; i < count; ) 239 { 240 let randomnumber = (range * Math.random() min) >> 0; 241 if( !markArray[ randomnumber ] ) 242 { 243 resultArray[ i ] = randomnumber; 244 markArray[ randomnumber ] = 1; 245 i ; 246 } 247 } 248 return resultArray; 249 } 250 251 /** 252 * 用于從Object數(shù)組wordlist中獲取數(shù)組randomlist中數(shù)字指向的Object元素，并且組成新的數(shù)組，返回。 253 * @param wordlist Array 254 * @param randomlist Array 255 */ 256 function randomArray( wordlist,randomlist ) 257 { 258 let wordlist20=[]; 259 for(let i=0;i<randomlist.length;i ){ 260 wordlist20[i]=wordlist[randomlist[i]]; 261 wordlist20[i]=wordlist[randomlist[i]]; 262 } 263 return wordlist20; 264 } 265 266 267 /** 268 * 點(diǎn)擊產(chǎn)生新的隨機(jī)單詞list 269 * @param e 獲取單擊事件 270 */ 271 function changewordlist( e ) 272 { 273 e = event || window.event; 274 wordlistf=randomArray( wordsBase,norepeatRandom( 20, 0, 99 ) ); 275 let count=20; 276 let $contentinit=$(".container>.content"); 277 if($contentinit.length){ 278 console.log($contentinit); 279 $contentinit.remove(); 280 } 281 282 283 $(".container>.but-container").after( "<div class=\"content\"></div>\n"); 284 for(let i=0;i<count;i ){ 285 let wordf=wordlistf[i].word; 286 let explainf=wordlistf[i].explain; 287 let $content=$(".container>.content"); 288 $content.append( "<div class=\"word\">" wordf "</div>\n" 289 "\t\t\t<div class=\"explain\">" explainf "</div>"); 290 // $content.append( "<div class=\"word\">單詞</div>\n" 291 // "\t\t\t<div class=\"explain\">解釋</div>"); 292 } 293 } 294 </script> 295 </body> 296 </html>?四、題后思考：
那么問題來了。在之前問題思考中，有一個(gè)JS的index()方法，來實(shí)現(xiàn)這個(gè)算法。那么到底哪個(gè)算法會(huì)節(jié)省系統(tǒng)資源呢？
之后我想寫一個(gè)相關(guān)的測(cè)試函數(shù)，運(yùn)算時(shí)間方面，完全可以在測(cè)試函數(shù)的開頭與結(jié)尾都獲取一個(gè)時(shí)間戳，通過兩者的差值就可以算出這個(gè)算法的運(yùn)行時(shí)間。那么內(nèi)存、運(yùn)算量等相信也可以通過一些方法解決。但是如何提高這個(gè)測(cè)試函數(shù)的通用性，也就是如何讓這個(gè)測(cè)試函數(shù)可以測(cè)試多個(gè)類型的算法呢，畢竟不同的算法有著不同的參數(shù)，有時(shí)候還需要調(diào)用個(gè)函數(shù)等等。所以這個(gè)思考分為兩個(gè)部分，一個(gè)是這個(gè)算法的性能測(cè)試，一個(gè)是測(cè)試函數(shù)的拓展。
?
?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
- 上一篇： Java --＞ 斗地主案例实现洗牌、随
- 下一篇： navicat如何粘贴多行数据