JavaScript實(shí)現(xiàn)單英文金山打字通

更新時(shí)間：2020年07月24日 10:09:13 作者：''''''''馬賽克''''''''

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)單英文金山打字通，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

單英文的金山打字通的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

1、頁(yè)面的布局代碼如下：

<div> 
 <div id="char">A</div>
 <div id="result">請(qǐng)?jiān)诎存I上按下屏幕上顯示的字</div>
</div>

2、頁(yè)面布局的樣式代碼如下：

 body{
 margin: 0;
 /*開啟彈性布局，并讓彈性布局中的子元素
 水平居中對(duì)齊，垂直居中對(duì)齊*/
 display: flex;
 /* 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式 */
 justify-content: center;
 align-items: center;
 /*文字居中*/
 text-align: center;
 /*設(shè)置背景顏色的經(jīng)像漸變*/
 background: radial-gradient(circle,#444,#000,#000);
 }
 #char{
 font-size: 400px;
 color: lightgreen;
 /*設(shè)置文字陰影*/  
 /*位置可以為負(fù)值*/
 /*text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色*/
 text-shadow: 0 0 50px #666;
 }
 #result{
 font-size: 20px;
 color: #888;
 }
 /*找到id為char及類名為error的div元素*/
 #char.error{
 color: red; 
 }

3、聲明變量接收參數(shù)

//來(lái)保存65~90之間的任意一個(gè)隨機(jī)整數(shù)
 var code;
//表示正確的次數(shù)
 var okCount = 0;
//錯(cuò)誤的次數(shù)
 var errorCount = 0;
//獲取顯示字符的div
 var charBox = document.getElementById('char');
//獲取顯示結(jié)果的div
 var result = document.getElementById('result');

4、寫show()方法獲取A~Z之間的任意一個(gè)字符

function show() {
 //獲取[0,1)之間的一個(gè)隨機(jī)數(shù)
 var rand = Math.random();
 // //獲取一個(gè)0到26之間的一個(gè)隨機(jī)數(shù)（不包含26）
 code = rand * 26;
 // //Math.floor(a)對(duì)數(shù)字a向下取整，獲取到一個(gè)小于等于a最近的整數(shù)
 // //獲取0~25之間任意一個(gè)整數(shù)
 code = Math.floor(code);
 // //獲取到65~90之間的任意整數(shù)
 code = code + 65;

 //把Unicode的十進(jìn)制編碼轉(zhuǎn)化成對(duì)應(yīng)的字符
 //獲取A~Z的任意一個(gè)字符
 var char = String.fromCharCode(code);
 console.log(char);
 //把字符顯示在界面上
 charBox.innerHTML = char;
 }
 show();//調(diào)用方法

5、鍵盤按下來(lái)的事件

window.onkeydown = function (ev) {
 //獲取按鍵所對(duì)應(yīng)的Unicode十進(jìn)制編碼
 var key = ev.keyCode;
 //判斷按鍵字母所對(duì)應(yīng)的數(shù)字和隨機(jī)獲取的數(shù)字是否相等
 if (key == code) {
 //按鍵正確，正確次數(shù)+1
 okCount++;
 //當(dāng)按鍵正確時(shí)，重新顯示新的字符
 show();
 //添加正確的動(dòng)畫 通過(guò)js給div添加類名
 charBox.className = 'animated zoomIn';
 } else {
 //按鍵錯(cuò)誤，錯(cuò)誤次數(shù)+1
 errorCount++;
 //添加按鍵錯(cuò)誤的動(dòng)畫
 charBox.className = 'animated shake error';
 }
 showResult();
 //0.5秒之后清除，動(dòng)畫
 setTimeout(clearAnimated, 500);//紅色顏色消失
}

6、負(fù)責(zé)清除動(dòng)畫的方法

function clearAnimated() { 
 charBox.className = '';
}

7、展示計(jì)算的結(jié)果

function showResult() {
 var rate = 100 * okCount / (okCount + errorCount);
 //顯示正確個(gè)數(shù) 錯(cuò)誤個(gè)數(shù) 及正確率
 result.innerHTML = '正確' + okCount + '個(gè)' + '錯(cuò)誤' + errorCount + '個(gè)'
 + '正確率' + rate.toFixed(2) + '%';//toFixed(2)保留兩位小數(shù)
 }

8、效果圖