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

這篇文章主要介紹了JavaScript怎么實現(xiàn)單英文金山打字通，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、坡頭網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為坡頭等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

1、頁面的布局代碼如下：

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

2、頁面布局的樣式代碼如下：

 body{
 margin: 0;
  /*開啟彈性布局，并讓彈性布局中的子元素
  水平居中對齊，垂直居中對齊*/
  display: flex;
  /* 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式 */
  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ù)

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

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

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

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

5、鍵盤按下來的事件

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

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

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

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

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

8、效果圖

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript怎么實現(xiàn)單英文金山打字通”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享標(biāo)題：JavaScript怎么實現(xiàn)單英文金山打字通
URL分享：http://muchs.cn/article26/ihpdjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)