一個練習日語五十音圖的小工具
阿新 • • 發佈：2017-11-02
value document 下一個 class font-face rip nload tran event
<html> <head> <title>五十音練習</title> <style type="text/css"> label { font-size:50px; font-face:微軟雅黑; } </style> <script type="text/javascript"> var element = ["あ","い","う","え","お","か","き","く","け","こ","さ","し","す","せ","そ","た","ち","つ","て","と","な","に","ぬ","ね","の","は","ひ","ふ","へ","ほ","ま","み","む","め","も","や","ゆ","よ","ら","り","る","れ","ろ","わ","を","ん"]; var max = 45; var min = 0; var type = 0; var shuxu = 0; vardaoxu = 0; function test() { var test_request_node = document.getElementById("test_request"); var test_answer_node = document.getElementById("test_answer"); var test_dscription_node = document.getElementById("test_dscription"); var test_request = test_request_node.innerText; var test_answer = test_answer_node.value; test_request = getNextElement(); test_request_node.innerText = test_request; test_dscription_node.innerText = "請輸入答案"; } function getNextElement(){ var test_request_node = document.getElementById("test_request"); var test_answer_node = document.getElementById("test_answer"); var test_dscription_node = document.getElementById("test_dscription"); if(type==0){ //順序 if(shuxu<max){ var e = element[shuxu]; shuxu++; return e; }else if(shuxu==max){ var e = element[shuxu]; test_dscription_node.innerText = "最後一個"; return e; }else{ var e = element[shuxu-1]; test_dscription_node.innerText = "練習完畢"; return e; } }else if(type==1){ //倒序 if(daoxu<max){ var e = element[max-daoxu]; daoxu++; return e; }else if(daoxu==max){ var e = element[max-daoxu]; test_dscription_node.innerText = "最後一個"; return e; }else{ var e = element[max-daoxu+1]; test_dscription_node.innerText = "練習完畢"; return e; } }else if(type==2){ //隨機 return element[getRandom(max,min)]; } } function input_answer(){ var test_request_node = document.getElementById("test_request"); var test_answer_node = document.getElementById("test_answer"); var test_dscription_node = document.getElementById("test_dscription"); var test_request = test_request_node.innerText; var test_answer = test_answer_node.value; if(""==test_answer.trim()){ test_dscription_node.innerText = "請輸入答案"; }else{ if(test_answer.trim()==test_request){ test_dscription_node.innerText = "正確，下一個"; test_request_node.innerText = getNextElement(); test_answer_node.value = ""; }else{ test_dscription_node.innerText = "錯誤"; } } } function getRandom(max,min){ return Math.round(Math.random() * (max - min) + min); } document.onkeydown = function kd(){ if(event.keyCode ==13){ input_answer(); } } function paixu(t){ type = t; shuxu = 0; daoxu = 0; var b_0 = document.getElementById("b_0"); var b_1 = document.getElementById("b_1"); var b_2 = document.getElementById("b_2"); if(t==0){ b_0.setAttribute("style","color:#CD9B1D;"); b_1.setAttribute("style","color:black;"); b_2.setAttribute("style","color:black;"); }else if(t==1){ b_0.setAttribute("style","color:black;"); b_1.setAttribute("style","color:#CD9B1D;"); b_2.setAttribute("style","color:black;"); }else if(t==2){ b_0.setAttribute("style","color:black;"); b_1.setAttribute("style","color:black;"); b_2.setAttribute("style","color:#CD9B1D;"); } test(); } window.onload=test; </script> </head> <body > <div align="center" style="margin-top:80px"> <label id="test_request" ></label> </div> <div align="center" style="margin-top:20px"> <input type="button" value="順序" style="color:#CD9B1D;" onclick="paixu(0)" id="b_0"/> <input type="button" value="倒序" style="margin-left:5px" onclick="paixu(1)" id="b_1"/> <input type="button" value="隨機" style="margin-left:5px" onclick="paixu(2)" id="b_2"/> </div> <div align="center" style="margin-top:20px"> <span id="test_dscription" style="size:18px;"></span> </div> <div align="center" style="margin-top:20px"> <input type="text" id="test_answer" style="font-size:50px;width:80px;" /> </div> </body> </html>
一個練習日語五十音圖的小工具