林小宅的點名冊

時間 2019-11-25

標籤點名冊简体版

原文原文鏈接

因爲職業的須要，我每次上課都要點名來確認班上的到課率，由於一邊點一邊看學生舉手效率低下，就上網找了一篇用JavaScript文字轉語音的博客，實現了一個在線點名的網頁，下面是個人代碼：javascript

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>林小宅的花名冊</title>
  6         
  7         <style type="text/css">
  8             #namename{
  9                 line-height: 500px;
 10                 height: 500px;
 11                 text-align: center;
 12                 font-size: 100px;
 13             }
 14             .oo{
 15                 width: 290px;
 16                 height: 20px;
 17                 margin: 0px auto;
 18             }
 19         </style>
 20     </head>
 21     <body>
 22         <div id="namename">
 23                 準備好了嗎？
 24         </div>
 25         <div class="oo">
 26             <select name="" id="kj">
 27                 <option value="1" >前端1班</option>
 28                 <option value="2">前端2班</option>
 29                 <option value="3">前端3班</option>
 30                 <option value="4">前端4班</option>
 31                 <option value="5">大數據</option>
 32                 <option value="6">C語言</option>
 33             </select>
 34             <button onclick="clickme()">開始點名</button>    
 35             <button onclick="patient()">觀察人員</button>    
 36         </div>
 37         <div id="bdtts_div_id">
 38             <audio id="tts_autio_id" autoplay="autoplay">
 39                 <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=開始點名啦" type="audio/mpeg">
 40                 <embed id="tts_embed_id" height="0" width="0" src="">
 41             </audio>
 42         </div>
 43 
 44         <script type="text/javascript"> 
 45 
 46         //前段一班
 47         var fontEnd_class1 = "前端1班_鄭剴鴻_"
 48                         +"林彬_"
 49                         +"張偉彬_"
 50                         +"林慶祥_"
 51                         +"譚明智_"
 52                         +"羅旭強_"
 53                         +"蔡其成_"
 54                         +"李瑞林_"
 55                         +"潘粵湘_"
 56                         +"房霖_"
 57                         +"賴展凱_"
 58                         +"吳宗榮_"
 59                         +"楊丹娜_"
 60                         +"黃顯權_"
 61                         +"鄧富成_"
 62                         +"謝嘉煒_"
 63                         +"楊丹鳳_"
 64                         +"黎煒鬆_"
 65                         +"謝金航_"
 66                         +"龍偉樂_"
 67                         +"陳浩賢_"
 68                         +"王雨婷_"
 69                         +"黃俊威_"
 70                         +"梁達斌_"
 71                         +"陳澤凱_"
 72                         +"鄺梓豪_"
 73                         +"邱文威_"
 74                         +"陳熙才_"
 75                         +"梁關偉_"
 76                         +"陳家恆_"
 77                         +"黃超鏵_"
 78                         +"賴桂玲_"
 79                         +"吳勝睿_"
 80                         +"李永成_"
 81                         +"劉耿濤_"
 82                         +"張家毓_"
 83                         +"蔡志豪_"
 84                         +"周浩東_"
 85                         +"吳軍龍_"
 86                         +"鄞沛遠_"
 87                         +"李上欽_"
 88                         +"鄧錦鵬_"
 89                         +"陳俊安_"
 90                         +"陳治_"
 91                         +"梁玉婷_"
 92                         +"郭金川_"
 93                         +"陳健欣_"
 94                         +"李澤偉_"
 95                         +"林俊宇_"
 96                         +"陳劍鋒_"
 97                         +"黃鋼祥_"
 98                         +"廖家灼_"
 99                         +"何富鋮_"
100                         +"許俊偉_"
101                         +"王子泓_"
102                         +"吳澤峯_";
103         //前端2班
104         var fontEnd_class2 ="前端2班_孫惟晟_"
105                             +"文浩旭_"
106                             +"莊昊庭_"
107                             +"廖偉健_"
108                             +"聶大森_"
109                             +"羅家敬_"
110                             +"陳曉生_"
111                             +"李曄韜_"
112                             +"卜文博_"
113                             +"彭旭成_"
114                             +"梁婉婷_"
115                             +"辛梓瀚_"
116                             +"李思_"
117                             +"林樂祺_"
118                             +"黃才略_"
119                             +"關瑜沛_"
120                             +"梁沛立_"
121                             +"梁紹鵬_"
122                             +"植湛深_"
123                             +"高建塘_"
124                             +"顏卓越_"
125                             +"羅浩延_"
126                             +"陳昱鴻_"
127                             +"周宇傑_"
128                             +"餘釺華_"
129                             +"談鈺鋒_"
130                             +"盧炯銘_"
131                             +"吳鍵東_"
132                             +"張琦_"
133                             +"梁佰華_"
134                             +"冼耀琪_"
135                             +"蘇世宇_"
136                             +"劉家敏_"
137                             +"範顯超_"
138                             +"嚴朝朗_"
139                             +"林逸新_"
140                             +"李文龍_"
141                             +"蔡東威_"
142                             +"譚源潮_"
143                             +"楊嘉鑫_"
144                             +"劉浩威_"
145                             +"楊柏麗_"
146                             +"馮卓鵬_"
147                             +"伍桑_"
148                             +"譚建嵐_"
149                             +"梁浩軒_"
150                             +"鍾所願_"
151                             +"蔣敏維_"
152                             +"張海鵬_"
153                             +"梁文傑_"
154                             +"葉育豐_"
155                             +"陳吉周_"
156                             +"魏欽宏_"
157                             +"韋雄哲_"
158                             +"王遠旭_"
159                             +"莊曉鑫_點名結束";
160         //前段3班
161         var fontEnd_class3 = "前端3班_鄭浩佳_"+
162                             "湯嶽文_"+
163                             "黃澤嵐_"+
164                             "林澤儒_"+
165                             "李佳川_"+
166                             "郭宇亮_"+
167                             "陳婉麗_"+
168                             "林澤鑫_"+
169                             "董志勝_"+
170                             "劉鼕鼕_"+
171                             "盧欣苗_"+
172                             "謝根甫_"+
173                             "劉鈞鏗_"+
174                             "蔡爍_"+
175                             "張思敏_"+
176                             "邊建_"+
177                             "林桂鑫_"+
178                             "林曉鵬_"+
179                             "歐楚瑜_"+
180                             "蘇信泉_"+
181                             "張志創_"+
182                             "陳澤博_"+
183                             "黃仁海_"+
184                             "楊觀霖_"+
185                             "林浩鋒_"+
186                             "陳彥旭_"+
187                             "廖世躍_"+
188                             "洪曉東_"+
189                             "劉麗敏_"+
190                             "施木偉_"+
191                             "劉悅川_"+
192                             "李雄傑_"+
193                             "葉成浩_"+
194                             "楊澤軒_"+
195                             "吳偉陽_"+
196                             "崔嘉承_"+
197                             "陳振羣_"+
198                             "周仕穎_"+
199                             "朱家浩_"+
200                             "周志源_"+
201                             "黃澤浩_"+
202                             "林於聰_"+
203                             "馮時帆_"+
204                             "文漢鵬_"+
205                             "江俊霖_"+
206                             "謝俊威_"+
207                             "楊建林_"+
208                             "胡洛彬_"+
209                             "陳愷_"+
210                             "謝曉漫_"+
211                             "林煜_"+
212                             "陳潔瑩_"+
213                             "陳日冠_"+
214                             "鄧錦華_"+
215                             "梁釗柯_"+
216                             "辛子慧_點名結束";
217         //前端4班
218         var fontEnd_class4 ="前端4班_吳炳麟_"+
219                             "高偉崇_"+
220                             "蔡晉昇_"+
221                             "吳宇軒_"+
222                             "黃慧燕_"+
223                             "黃海琦_"+
224                             "張榮_"+
225                             "葉羽楓_"+
226                             "餘秋材_"+
227                             "王偉傑_"+
228                             "黎航銘_"+
229                             "何偉業_"+
230                             "楊永裕_"+
231                             "黃欽豪_"+
232                             "張俊_"+
233                             "溫偉韜_"+
234                             "劉凱鋼_"+
235                             "鄭峻珩_"+
236                             "陳小楠_"+
237                             "江卓峯_"+
238                             "洪浩彬_"+
239                             "陸科良_"+
240                             "劉做林_"+
241                             "黃開築_"+
242                             "林祈宏_"+
243                             "柯銘_"+
244                             "陳華宏_"+
245                             "詹凡_"+
246                             "朱倍立_"+
247                             "鍾東煜_"+
248                             "餘華龍_"+
249                             "龍沛元_"+
250                             "許銘全_"+
251                             "翁聰穎_"+
252                             "肖東江_"+
253                             "辛懷睿_"+
254                             "吳勉銳_"+
255                             "林添信_"+
256                             "餘志憲_"+
257                             "林潔淮_"+
258                             "鄭家寶_"+
259                             "鄧偉業_"+
260                             "何濤_"+
261                             "劉藹瑞_"+
262                             "梁宇航_"+
263                             "範浩林_"+
264                             "陳俊源_點名結束";
265         //C語言4班
266         var context1 = "C語言4班_冼明朗_劉宇鴻_"+
267                         "劉春雄_"
268                         +"劉曉聰_"
269                         +"劉粵豪_"
270                         +"吳業朋_"
271                         +"吳劍洋_"
272                         +"吳德昊_"
273                         +"吳桂洲_"
274                         +"周澤鍇_"
275                         +"唐進義_"
276                         +"龐洪滔_"
277                         +"廖輝健_"
278                         +"張兆山_"
279                         +"徐海祥_"
280                         +"朱勇騰_"
281                         +"朱桂濤_"
282                         +"朱毅龍_"
283                         +"李喜廷_"
284                         +"李堪立_"
285                         +"李新茹_"
286                         +"李永聰_"
287                         +"楊超文_"
288                         +"林宇軒_"
289                         +"林志權_"
290                         +"林澤航_"
291                         +"林琳_"
292                         +"柯雅量_"
293                         +"溫俊豪_"
294                         +"潘華鋒_"
295                         +"潘家炬_"
296                         +"王奕敏_"
297                         +"白昌煜_"
298                         +"練慶欽_"
299                         +"羅思惟_"
300                         +"翁俊源_"
301                         +"胡建斌_"
302                         +"冼明朗_"
303                         +"蘇浩洋_"
304                         +"範德浩_"
305                         +"藍文壕_"
306                         +"蔡翠婷_"
307                         +"謝銀光_"
308                         +"邱利_"
309                         +"郭珊珊_"
310                         +"陳冠宇_"
311                         +"陳泳銜_"
312                         +"馬偉東_"
313                         +"黃建成_"
314                         +"黃文偉_"
315                         +"黃膨釩_"
316                         +"黃銳_"
317                         +"黃梓豐_"
318                         +"蘇西波_"
319                         +"任旺_"
320                         +"孫潤東_點名結束";
321         //大數據班
322         var bigData_class = "大數據班_彭緒政_"+
323                             "廖炎彬_"+
324                             "馮嘉泳_"+
325                             "謝俊欽_"+
326                             "林澤彬_"+
327                             "陳森華_"+
328                             "雷濤_"+
329                             "宋子洋_"+
330                             "杜偉傑_"+
331                             "薛啓炫_"+
332                             "吳希豚_"+
333                             "黃廣準_"+
334                             "陳泓哲_"+
335                             "楊文豪_"+
336                             "韓俊銘_"+
337                             "方銘_"+
338                             "劉嘉楠_"+
339                             "陳澤銳_"+
340                             "張大橋_"+
341                             "黃志聰_"+
342                             "陳敏清_"+
343                             "蔡鎵鍔_"+
344                             "黃嘉泉_"+
345                             "蔡創洲_"+
346                             "譚俊傑_"+
347                             "陳廣金_"+
348                             "許坤威_"+
349                             "梁朗明_"+
350                             "吳桂平_"+
351                             "丘文源_"+
352                             "徐鴻宇_"+
353                             "陳梓萼_"+
354                             "李偉元_"+
355                             "鍾盟陽_"+
356                             "趙伯鋆_"+
357                             "陳嘉銘_"+
358                             "利錦成_"+
359                             "林楚炯_"+
360                             "葉偉傑_"+
361                             "歐陽一鳴_"+
362                             "肖哲華_"+
363                             "曾劍濤_"+
364                             "蔡鎧文_"+
365                             "林宏偉_"+
366                             "蘇乙航_"+
367                             "黃慶餘_"+
368                             "肖俊傑_"+
369                             "黃峻權_點名結束";
370 
371         function doTTS(ttsText){            
372             var ttsDiv = document.getElementById('bdtts_div_id');
373             var ttsAudio = document.getElementById('tts_autio_id');
374             ttsDiv.removeChild(ttsAudio);
375             var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
376             var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text='+ttsText+'" type="audio/mpeg">';
377             var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
378             var au2 = '</audio>';
379             ttsDiv.innerHTML += au1 + sss + eee + au2;
380             
381             var media = document.getElementById("tts_autio_id");
382             const playPromise = media.play();
383             if (playPromise !== null){
384                 playPromise.catch(() => { media.play(); })
385             }
386             document.getElementById("namename").innerHTML = ttsText;
387         }
388 
389         var isKeepOn = true;
390         var whereStop = 0;
391         var nameList = [fontEnd_class1,fontEnd_class2,fontEnd_class3,fontEnd_class4,bigData_class,context1];
392         var arr;
393         var blackName = "";
394         function clickme(){
395             arr = nameList[document.getElementById("kj").selectedIndex].split("_");
396             for(var i = 0;i<arr.length;i++){
397                 //解決做用域的問題，以及setTimeout不能調用帶參數的函數，只能在匿名函數中封裝調用
398                 (function(name,j){
399                     setTimeout(function(){doTTS(name)},j*2500);
400                 })(arr[i],i);
401             }
402         }
403 
404         function patient(){
405             var name = document.getElementById("namename").innerHTML+" | ";
406             blackName +=name;
407             console.log(blackName);
408         }
409 
410 
411 
412         
413         </script>
414     </body>
415 </html>

View Code

這裏比較遺憾的是，當看到有學生沒有舉手的時候，沒有辦法暫停下來，待後續的改進，所以我加了一個按鈕，當發現學生沒有舉手的時候就點擊「觀察人員」，把該學生的名單打印到控制檯，點完以後再問沒來的具體狀況。作這個程序也就花了半個小時，卡在setTimeout()這個函數上。由於我須要實現的效果是每隔2秒就點一個學生的名字，用到了for循環，可是每次for循環的時候並不會停下來去點名，而是一會兒把for循環的語句執行完，把每一個setTimeout加到待執行隊列中，而後所有的setTimeout一下所有執行了，造成的效果就是一個班的54我的的名字同時點出來了。網上有人說能夠用當即執行函數，用了以後仍是沒有達到效果，後來才知道原來是setTimeout不能執行帶有參數的函數，必須得用一個匿名函數來封裝調用，最後的效果是這樣的：css

1 for(var i = 0;i<arr.length;i++){
2  //解決做用域的問題，以及setTimeout不能調用帶參數的函數，只能在匿名函數中封裝調用
3   (function(name,j){
4      setTimeout(function(){doTTS(name)},j*2500);
5   })(arr[i],i);
6 }

另外就是音頻播放的問題，media.play()和media.pause()的含義，意思大概明白了，可是很難言語，這裏就不說了，只說解決的方法：html

1 var media = document.getElementById("tts_autio_id");
2             const playPromise = media.play();
3             if (playPromise !== null){
4                 playPromise.catch(() => { media.play(); })
5             }
6             document.getElementById("namename").innerHTML = ttsText;

這是國外大神提供的參考代碼，使用了一下，發現很好用呢，就這樣，睡覺！！！前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。