您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript怎么實(shí)現(xiàn)單英文金山打字通,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
單英文的金山打字通的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
1、頁面的布局代碼如下:
<div> <div id="char">A</div> <div id="result">請?jiān)诎存I上按下屏幕上顯示的字</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之間的任意一個(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)對數(shù)字a向下取整,獲取到一個(gè)小于等于a最近的整數(shù) // //獲取0~25之間任意一個(gè)整數(shù) code = Math.floor(code); // //獲取到65~90之間的任意整數(shù) code = code + 65; //把Unicode的十進(jìn)制編碼轉(zhuǎn)化成對應(yīng)的字符 //獲取A~Z的任意一個(gè)字符 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ù)字和隨機(jī)獲取的數(shù)字是否相等 if (key == code) { //按鍵正確,正確次數(shù)+1 okCount++; //當(dāng)按鍵正確時(shí),重新顯示新的字符 show(); //添加正確的動畫 通過js給div添加類名 charBox.className = 'animated zoomIn'; } else { //按鍵錯(cuò)誤,錯(cuò)誤次數(shù)+1 errorCount++; //添加按鍵錯(cuò)誤的動畫 charBox.className = 'animated shake error'; } showResult(); //0.5秒之后清除,動畫 setTimeout(clearAnimated, 500);//紅色顏色消失 }
6、負(fù)責(zé)清除動畫的方法
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、效果圖
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JavaScript怎么實(shí)現(xiàn)單英文金山打字通”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。