html打字练习测试代码,javascript写的一个练习打字的小程序

div {float:right; width:60px; height:50px; background:#FFC000;font-family:黑体;font-size:45px;font-weight:bold;text-align:center;}

//.sidebar{color:#FFf; }

.black_overlay{  display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);  }  .white_content {  display: none;  position: absolute;  top: 10%;  left: 25%;  width: 48%;  height: 65%;  padding: 16px;  border: 16px solid orange;  background-color: white;  z-index:1002;  overflow: auto;  }

var heightClient = 0 ;//当前浏览器高，初始值为0

var widthClient = 0 ;//当前浏览器宽，初始值为0

var executionTime = 2800 ;//设置div的运行速度，决定setInterval调用方法的时间

var leftIndex = 60 ;//div横坐标初始位置

var divsId = 0 ;//div的id编号，到100000时重新置为0

document.onkeydown = keyDown;//监听键盘

var letterArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] ;

//26个英文字母的对应键值

var keyCodeArr =

[65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90] ;

function MenuPanel(){//创建一个div的方法

var MenuDiv = document.createElement("div");//创建div对象

var topIndex = 10 ;//div纵坐标初始位置

var valueId = "div_"+divsId ;//div的id

MenuDiv.id = valueId;

divsId++ ;

if(divsId==100000){//当divsId的值为100000时，divsId重新置为0

divsId = 0 ;

}

MenuDiv.style.position = "absolute"; //确定div的位置

MenuDiv.style.left = leftIndex ;

MenuDiv.style.top = topIndex ;

//leftIndex = leftIndex + 70 ;//改变div横坐标的全局变量，使得新的div对象向右移动70个像素

//改变div横坐标的全局变量，使得新的div对象的横坐标在60~(浏览器宽度-220)之间

leftIndex = (Math.floor(Math.random()*widthClient)-220)  ;

if(leftIndex < 60){

leftIndex = 60 ;

}

MenuDiv.innerHTML = letterArr[Math.floor(Math.random()*26)] ;//div内容随机26个英文字母

document.body.appendChild(MenuDiv);

//每隔1秒，使得当前div对象向下移动50个像素

setInterval(function(){

topIndex = topIndex + 60 ;

var divObj = document.getElementById(valueId) ;

divObj.style.top = topIndex ;

if(topIndex > (heightClient - 60) ){

document.body.removeChild(divObj) ;

var counter = document.getElementById("counter").innerHTML ;

//如果漏掉一个字母，则减小一次计数值

document.getElementById("counter").innerHTML = counter - 1 ;

if(counter <= 1){//如果想做的更好，可掉一个div窗口,而不是alert框

alert(" GAME OVER !!! ") ;

window.close() ;

}

}

},executionTime/2) ;

}

function keyDown() {//鼠标监听方法

var letterVal ;

for(var i = 0 ; i < keyCodeArr.length ; i++){

if(event.keyCode == keyCodeArr[i]){//从键盘上按下键的keyCode等于keyCodeArr数组中的数值

letterVal = letterArr[i] ;//获取此keyCode对应的字母

}

}

var divObjectArr = document.getElementsByTagName("div") ;

for(var j = 0 ; j < divObjectArr.length ; j++){

if(divObjectArr[j].innerHTML == letterVal){//如果页面上有你键盘上点击的

var divObj = document.getElementById(divObjectArr[j].id) ;//获取此id的对象

var embed ;

//对不容浏览器创建声音的不同方法-->start

//可随便找个最最简短的音乐，命名为doodee.wav,放在与此html同级目录下

var Sys = {};

var ua = navigator.userAgent.toLowerCase();

if (window.ActiveXObject){

Sys.ie = ua.match(/msie ([\d.]+)/)[1] ;

}else if (document.getBoxObjectFor){

Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] ;

}else if (window.MessageEvent && !document.getBoxObjectFor){

Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] ;

}else if (window.opera){

Sys.opera = ua.match(/opera.([\d.]+)/)[1] ;

}else if (window.openDatabase){

Sys.safari = ua.match(/version\/([\d.]+)/)[1] ;

}

if(Sys.ie) {

embed  = document.createElement("");//IE可以是这种写法

}

if(Sys.firefox) {}

if(Sys.chrome){//谷歌浏览器是这种写法

embed = document.createElement("embed") ;

embed.src = "doodee.wav" ;

embed.height = "0" ;

embed.width = "0" ;

}

if(Sys.opera) {}

if(Sys.safari) {}

//对不容浏览器创建声音的不同方法-->end

document.body.appendChild(embed); //添加声音

document.body.removeChild(divObj) ;//删除此对象

}

}

}

function onloadMethod(){//页面刚打开时，显示难度选择功能

heightClient = document.body.clientHeight ;//当前浏览器的高度

widthClient = document.body.clientWidth ;//当前浏览器的宽度

document.getElementById('light').style.display = 'block' ;

document.getElementById('fade').style.display = 'block' ;

}

function buttonMethod(){//选择游戏难度等级

document.getElementById('light').style.display = 'none' ;

document.getElementById('fade').style.display = 'none' ;

var difficultyLevelVal = document.getElementsByName("difficultyLevel") ;

for(var i = 0 ; i < difficultyLevelVal.length ; i++){

if(difficultyLevelVal[i].checked){

executionTime = difficultyLevelVal[i].value ;

}

}

setInterval(MenuPanel,executionTime) ;//每executionTime秒创建一个div对象

}

function close_window(){

window.close() ;

}

您的剩余次数为: 10

请选择你的难度:

  简单:

  中等:

  困难: