js實(shí)現(xiàn)打字小游戲
今日閑來(lái)無(wú)事,想試一試模擬打字游戲,下面是效果圖,會(huì)記錄判斷打字,如果在外圍添加setInterval函數(shù),可以實(shí)現(xiàn)測(cè)試打字速度的功能。
html
<div class="wrapper"> <div id="text">A</div> <input type="text" id="ipt"> </div>
css
body, html { width: 100%; height: 100%; } .wrapper { width: 400px; margin: 20px auto; } div { font-size: 100px; font-weight: 900; text-align: center; } input{ width: 400px; margin: 20px auto; }
js
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' var text = document.getElementById('text') var ipt = document.getElementById('ipt') var res; var newRes; var random = Math.round(Math.random() * 25); var count = 0 window.onkeyup = function (e) { var random = Math.round(Math.random() * 25); newRes = str[random] res = text.innerHTML text.innerHTML = newRes if(e.keyCode == res.charCodeAt(0)){ count++; ipt.value = ''; }else{ alert('game over' + ' ' +'您的得分是'+ ':' + count) count = 0; ipt.value = ''; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js入門(mén)之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法,應(yīng)該對(duì)初學(xué)Js的朋友們會(huì)有所幫助,下面就隨小編一起來(lái)看下吧2016-11-11JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號(hào)盤(pán)界面及功能模擬完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號(hào)盤(pán)界面及功能模擬完整實(shí)例,可以實(shí)現(xiàn)逼真模擬手機(jī)撥號(hào)盤(pán)界面并實(shí)現(xiàn)點(diǎn)擊輸入對(duì)應(yīng)號(hào)碼的功能,需要的朋友可以參考下2015-05-05使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化),本文重點(diǎn)給大家介紹基礎(chǔ)的動(dòng)畫(huà)類(lèi)實(shí)現(xiàn)時(shí)間軸,通過(guò)示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02