首页 > > 网页制作 > Javascript >

随机产生20个单词

2018-06-24 00:49:55来源：未知阅读 ()

随机产生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     /**
198      * 用于将基础的字符串转换为需要的Object数组
199      * @ps 由于我们是通过\n来分解字符串，而字符串最后有一个/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个不重复随机数字。
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数组wordlist中获取数组randomlist中数字指向的Object元素，并且组成新的数组，返回。
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      * 点击产生新的随机单词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>

四、题后思考：

　　那么问题来了。在之前问题思考中，有一个JS的index()方法，来实现这个算法。那么到底哪个算法会节省系统资源呢？

　　之后我想写一个相关的测试函数，运算时间方面，完全可以在测试函数的开头与结尾都获取一个时间戳，通过两者的差值就可以算出这个算法的运行时间。那么内存、运算量等相信也可以通过一些方法解决。但是如何提高这个测试函数的通用性，也就是如何让这个测试函数可以测试多个类型的算法呢，毕竟不同的算法有着不同的参数，有时候还需要调用个函数等等。所以这个思考分为两个部分，一个是这个算法的性能测试，一个是测试函数的拓展。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有