當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
用javascript制作随机汉字打字练习小程序
生活随笔
收集整理的這篇文章主要介紹了
用javascript制作随机汉字打字练习小程序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個是上一篇的續集。也是2020年年底的時候給銀行妹寫的小程序，對我來說已經沒什么卵用了。但是，還是在CSDN里面留著吧，就像之前用python給那個叫xc的渣女寫的轉換器一樣。于我是無用之物，但是發出來也許能夠給廣大網友一點點幫助，那也算是挺欣慰的了。至少，就算是愛情永遠無望，我起碼還有代碼永遠相伴吧。
<!DOCTYPE html> <html> <head><title>打字練習</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css"></style> </head> <body style="width:100%;height:100%;margin:0;padding:0;"> <div style="width:100%;height:50px;font-weight:bold;font-size:20px;line-height:50px;text-align:center;color:white;background-color:deepskyblue;">打字練習</div><table style="border-collapse:collapse;"> <tr> <td><div id="sample" style="width:1000px;margin:10px;border:1px solid black;font-size:18px;"></div></td> <td rowspan="2" style="color:blue;font-weight:bold;"> 用時：<span id="time" style="color:red;"></span>秒<br> 速度：<span id="speed" style="color:red;"></span>分鐘/字<br> 正確率：<span id="correct" style="color:red;"></span>%<br> 錯誤：<span id="wrong" style="color:red;"></span>字<br> 退格：<span id="back" style="color:red;"></span>次<br> </td> </tr> <tr> <td> <p style="margin:0 10px;">請在下方輸入練習：</p> <textarea id="textarea" style="overflow:hidden;font-family:楷體;font-size:25px;font-weight:bold;width:1000px;height:300px;margin:10px;border:1px solid black;" oninput="calc()"></textarea></td> </tr> </table></body> <script type="text/javascript"> function id(x){return document.getElementById(x);}function randomsort(a, b) {return Math.random()>.5 ? -1 : 1;//用Math.random()函數生成0~1之間的隨機數與0.5比較，返回-1或1 }var whole = (function(){var tmp = '\ 一乙二十丁廠七卜人入八九幾兒了力乃刀又三于干虧士工土才寸下大丈與萬上小口巾山千乞川億個勺久凡及夕丸么廣亡門義之尸弓己已子衛也女飛刃習叉馬鄉豐王井開夫天無元專云扎藝木五支廳不太犬區歷尤友匹車巨牙屯比互切瓦止少日中岡貝內水見午牛手毛氣升長仁什片仆化仇幣仍僅斤爪反介父從今兇分乏公倉月氏勿欠風丹勻烏鳳勾文六方火為斗憶訂計戶認心尺引丑巴孔隊辦以允予勸雙書幻玉刊示末未擊打巧正撲扒功扔去甘世古節本術可丙左厲右石布龍平滅軋東卡北占業舊帥歸且旦目葉甲申叮電號田由史只央兄叼叫另叨嘆四生失禾丘付仗代仙們儀白仔他斥瓜乎叢令用甩印樂句匆冊犯外處冬鳥務包饑主市立閃蘭半汁匯頭漢寧穴它討寫讓禮訓必議訊記永司尼民出遼奶奴加召皮邊發孕圣對臺矛糾母幼絲式刑動扛寺吉扣考托老執鞏圾擴掃地揚場耳共芒亞芝朽樸機權過臣再協西壓厭在有百存而頁匠夸奪灰達列死成夾軌邪劃邁畢至此貞師塵尖劣光當早吐嚇蟲曲團同吊吃因吸嗎嶼帆歲回豈剛則肉網年朱先丟舌竹遷喬偉傳乒乓休伍伏優伐延件任傷價份華仰仿伙偽自血向似后行舟全會殺合兆企眾爺傘創肌朵雜危旬旨負各名多爭色壯沖冰莊慶亦劉齊交次衣產決充妄閉問闖羊并關米燈州汗污江池湯忙興宇守宅字安講軍許論農諷設訪尋那迅盡導異孫陣陽收階陰防奸如婦好她媽戲羽觀歡買紅纖級約紀馳巡壽弄麥形進戒吞遠違運扶撫壇技壞擾拒找批扯址走抄壩貢攻赤折抓扮搶孝均拋投墳抗坑坊抖護殼志扭塊聲把報卻劫芽花芹芬蒼芳嚴蘆勞克蘇桿杠杜材村杏極李楊求更束豆兩麗醫辰勵否還殲來連步堅旱盯呈時吳助縣里呆園曠圍呀噸足郵男困吵串員聽吩吹嗚吧吼別崗帳財針釘告我亂利禿秀私每兵估體何但伸作伯伶傭低你住位伴身皂佛近徹役返余希坐谷妥含鄰岔肝肚腸龜免狂猶角刪條卵島迎飯飲系言凍狀畝況床庫療應冷這序辛棄冶忘閑間悶判灶燦弟汪沙汽沃泛溝沒沈沉懷憂快完宋宏牢究窮災良證啟評補初社識訴診詞譯君靈即層尿尾遲局改張忌際陸阿陳阻附妙妖妨努忍勁雞驅純紗納綱駁縱紛紙紋紡驢紐奉玩環武青責現表規抹攏拔揀擔坦押抽拐拖拍者頂拆擁抵拘勢抱垃拉攔拌幸招坡披撥擇抬其取苦若茂蘋苗英范直茄莖茅林枝杯柜析板松槍構杰述枕喪或畫臥事刺棗雨賣礦碼廁奔奇奮態歐壟妻轟頃轉斬輪軟到非叔肯齒些虎虜腎賢尚旺具果味昆國昌暢明易昂典固忠咐呼鳴詠呢岸巖帖羅幟嶺凱敗販購圖釣制知垂牧物乖刮稈和季委佳侍供使例版侄偵側憑僑佩貨依的迫質欣征往爬彼徑所舍金命斧爸采受乳貪念貧膚肺肢腫脹朋股肥服脅周昏魚兔狐忽狗備飾飽飼變京享店夜廟府底劑郊廢凈盲放刻育閘鬧鄭券卷單炒炊炕炎爐沫淺法泄河沾淚油泊沿泡注瀉泳泥沸波潑澤治怖性怕憐怪學寶宗定宜審宙官空簾實試郎詩肩房誠襯衫視話誕詢該詳建肅錄隸居屆刷屈弦承孟孤陜降限妹姑姐姓始駕參艱線練組細駛織終駐駝紹經貫奏春幫珍玻毒型掛封持項垮挎城撓政赴趙擋挺括拴拾挑指墊掙擠拼挖按揮挪某甚革薦巷帶草繭茶荒茫蕩榮故胡南藥標枯柄棟相查柏柳柱柿欄樹要咸威歪研磚厘厚砌砍面耐耍牽殘殃輕鴉皆背戰點臨覽豎省削嘗是盼眨哄顯啞冒映星昨畏趴胃貴界虹蝦蟻思螞雖品咽罵嘩咱響哈咬咳哪炭峽罰賤貼骨鈔鐘鋼鑰鉤卸缸拜看矩怎牲選適秒香種秋科重復竿段便倆貸順修保促侮儉俗俘信皇泉鬼侵追俊盾待律很須敘劍逃食盆膽勝胞胖脈勉狹獅獨狡獄狠貿怨急饒蝕餃餅彎將獎哀亭亮度跡庭瘡瘋疫疤姿親音帝施聞閥閣差養美姜叛送類迷前首逆總煉炸炮爛剃潔洪灑澆濁洞測洗活派洽染濟洋洲渾濃津恒恢恰惱恨舉覺宣室宮憲突穿竊客冠語扁襖祖神祝誤誘說誦墾退既屋晝費陡眉孩除險院娃姥姨姻嬌怒架賀盈勇怠柔壘綁絨結繞驕繪給絡駱絕絞統耕耗艷泰珠班素蠶頑盞匪撈栽捕振載趕起鹽捎捏埋捉捆捐損都哲逝撿換挽熱恐壺挨恥耽恭蓮莫荷獲晉惡真框桂檔桐株橋桃格校核樣根索哥速逗栗配翅辱唇夏礎破原套逐烈殊顧轎較頓斃致柴桌慮監緊黨曬眠曉鴨晃晌暈蚊哨哭恩喚啊唉罷峰圓賊賄錢鉗鉆鐵鈴鉛缺氧特犧造乘敵秤租積秧秩稱秘透筆笑筍債借值倚傾倒倘俱倡候俯倍倦健臭射躬息徒徐艦艙般航途拿爹愛頌翁脆脂胸胳臟膠腦貍狼逢留皺餓戀槳漿衰高席準座脊癥病疾疼疲效離唐資涼站剖競部旁旅畜閱羞瓶拳粉料益兼烤烘煩燒燭煙遞濤浙澇酒涉消浩海涂浴浮流潤浪浸漲燙涌悟悄悔悅害寬家宵宴賓窄容宰案請朗諸讀扇襪袖袍被祥課誰調冤諒談誼剝懇展劇屑弱陵陶陷陪娛娘通能難預桑絹繡驗繼球理捧堵描域掩捷排掉堆推掀授教掏掠培接控探據掘職基著勒黃萌蘿菌菜萄菊萍菠營械夢梢梅檢梳梯桶救副票戚爽聾襲盛雪輔輛虛雀堂常匙晨睜瞇眼懸野啦晚啄距躍略蛇累唱患唯崖嶄崇圈銅鏟銀甜梨犁移笨籠笛符第敏做袋悠償偶偷您售停偏假得銜盤船斜盒鴿悉欲彩領腳脖臉脫象夠猜豬獵貓猛餡館湊減毫麻癢痕廊康庸鹿盜章竟商族旋望率著蓋粘粗粒斷剪獸清添淋淹渠漸混漁淘液淡深婆梁滲情惜慚悼懼惕驚慘慣寇寄宿窯密謀謊禍謎逮敢屠彈隨蛋隆隱婚嬸頸績緒續騎繩維綿綢綠琴斑替款堪搭塔越趁趨超提堤博揭喜插揪搜煮援裁擱摟攪握揉斯期欺聯散惹葬葛董葡敬蔥落朝辜葵棒棋植森椅椒棵棍棉棚棕惠惑逼廚廈硬確雁殖裂雄暫雅輩悲紫輝敞賞掌晴暑最量噴晶喇遇喊景踐跌跑遺蛙蛛蜓喝喂喘喉幅帽賭賠黑鑄鋪鏈銷鎖鋤鍋銹鋒銳短智毯鵝剩稍程稀稅筐等筑策篩筒答筋箏傲傅牌堡集焦傍儲奧街懲御循艇舒番釋禽臘脾腔魯猾猴然饞裝蠻就痛童闊善羨普糞尊道曾焰港湖渣濕溫渴滑灣渡游滋溉憤慌惰愧愉慨割寒富竄窩窗遍裕褲裙謝謠謙屬屢強粥疏隔隙絮嫂登緞緩編騙緣瑞魂肆攝摸填搏塌鼓擺攜搬搖搞塘攤蒜勤鵲藍墓幕蓬蓄蒙蒸獻禁楚想槐榆樓概賴酬感礙碑碎碰碗碌雷零霧雹輸督齡鑒睛睡睬鄙愚暖盟歇暗照跨跳跪路跟遣蛾蜂嗓置罪罩錯錫鑼錘錦鍵鋸矮辭稠愁籌簽簡毀舅鼠催傻像躲微愈遙腰腥腹騰腿觸解醬痰廉新韻意糧數煎塑慈煤煌滿漠源濾濫滔溪溜滾濱粱灘慎譽塞謹福群殿辟障嫌嫁疊縫纏靜碧璃墻撇嘉摧截誓境摘摔聚蔽慕暮蔑模榴榜榨歌遭酷釀酸磁愿需弊裳顆嗽蜻蠟蠅蜘賺鍬鍛舞穩算籮管僚鼻魄貌膜膊膀鮮疑饅裹敲豪膏遮腐瘦辣竭端旗精歉熄熔漆漂漫滴演漏慢寨賽察蜜譜嫩翠熊凳騾縮慧撕撒趣趟撐播撞撤增聰鞋蕉蔬橫槽櫻橡飄醋醉震霉瞞題暴瞎影踢踏踩蹤蝶蝴囑墨鎮靠稻黎稿稼箱箭篇僵躺僻德艘膝膛熟摩顏毅糊遵潛潮懂額慰劈操燕薯薪薄顛橘整融醒餐嘴蹄器贈默鏡贊籃邀衡膨雕磨凝辨辯糖糕燃澡激懶壁避繳戴擦鞠藏霜霞瞧蹈螺穗繁辮贏糟糠燥臂翼驟鞭覆蹦鐮翻鷹警攀蹲顫瓣爆疆壤耀躁嚼嚷籍魔灌蠢霸露囊罐翎嫵媚曳鎏怡廓滄';var arr = [];for(var i=0;i<tmp.length;i++){arr.push(tmp[i]);}return arr; })();function generate(){var tmp = '';for(var i=0;i<360;i++){tmp += '<span class="span" id="span'+i+'" style="font-family:楷體;font-size:25px;font-weight:bold;">' + whole[Math.floor(Math.random()*whole.length)] + '</span>';}id("sample").innerHTML = tmp; }generate();var start = false; var starttime = new Date(); var timetarget = id("time"); var correcttarget = id("correct"); var wrongtarget = id("wrong"); var speedtarget = id("speed"); var wholetime = 0; var len = 0; var correct = 0; var wrong = 0; var backcount = 0; var backtarget = id("back");document.onkeydown = function(event) {var e = event || window.event || arguments.callee.caller.arguments[0];if (e && e.keyCode == 8 && start) { // 按 BACKSPACEbackcount += 1;backtarget.innerHTML =backcount;}};function calc(){if(!start){start = true;starttime = new Date(); setInterval(function(){wholetime = Math.floor((new Date()-starttime)/1000);timetarget.innerHTML = wholetime;correcttarget.innerHTML = Math.floor(correct/(correct+wrong)*100);speedtarget.innerHTML = Math.floor(len/(wholetime/60));wrongtarget.innerHTML = wrong;},10);}var text = id("textarea").value;len = text.length;var target =null;var spans = document.getElementsByClassName("span");for(var i=0;i<spans.length;i++){spans[i].style.color = "black";}correct = 0;wrong = 0;for(var i=0;i<len;i++){target = id("span"+i);if(target.innerHTML == text[i]){target.style.color = "gold";correct += 1;}else{target.style.color = "red";wrong += 1;}}}</script> </html>總結
以上是生活随笔為你收集整理的用javascript制作随机汉字打字练习小程序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用javascript实现数字雨
- 下一篇： 用python selenium实现一个