<div>  <div id="char">A</div> <div id="result">請在按鍵上按下屏幕上顯示的字</div></div>

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

//來保存65~90之間的任意一個隨機整數 var code;//表示正確的次數 var okCount = 0;//錯誤的次數 var errorCount = 0;//獲取顯示字符的div var charBox = document.getElementById('char');//獲取顯示結果的div var result = document.getElementById('result');

function show() {  //獲取[0,1)之間的一個隨機數  var rand = Math.random();  // //獲取一個0到26之間的一個隨機數（不包含26）  code = rand * 26;  // //Math.floor(a)對數字a向下取整，獲取到一個小于等于a最近的整數  // //獲取0~25之間任意一個整數  code = Math.floor(code);  // //獲取到65~90之間的任意整數  code = code + 65;  //把Unicode的十進制編碼轉化成對應的字符  //獲取A~Z的任意一個字符  var char = String.fromCharCode(code);  console.log(char);  //把字符顯示在界面上  charBox.innerHTML = char; } show();//調用方法

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

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

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