javascript写的一个练习打字的小程序

最新推荐文章于 2025-02-08 10:39:17 发布

huimie2012

最新推荐文章于 2025-02-08 10:39:17 发布

阅读量1.3k

点赞数

分类专栏： javascript javascript 文章标签： javascript 练习打字

本文链接：https://blog.youkuaiyun.com/huimie2012/article/details/8146500

版权

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

这是一个使用JavaScript编写的练习打字的小程序，适用于IE8.0和Chrome21.0.1180.89。程序创建浮动的div元素，随机显示26个英文字母，并监听键盘输入，当用户按下的字母与div显示的字母匹配时，div消失，同时播放声音。游戏设有三种难度级别，用户可以根据自己的水平选择。游戏结束条件是错过一定数量的字母。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
  <style type="text/css">
   div {float:right; width:60px; height:50px; background:#FFC000;font-family:黑体;font-size:45px;font-weight:bold;text-align:center;}
   //.sidebar{color:#FFf; }
  </style>
  <style>
      .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; }
  </style>

   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("<embed   src='doodee.wav'   height='0'     width='0'></embed>");//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 close_window(){
   window.close() ;
  }

  </script>
</head>
<body bgcolor="#BEC2BF" οnlοad="onloadMethod();">
  <div style="border:solid 2px #ff0000;width:60px;height:460px;">您的剩余次数为: <span id="counter">10</span></div>
  <div id="light" class="white_content"> </br>
   请选择你的难度:</br>
     简单: <input type="radio" name="difficultyLevel" value="2800" checked/></br>
     中等: <input type="radio" name="difficultyLevel" value="1200" /></br>
     困难: <input type="radio" name="difficultyLevel" value="800" /></br>
   <center>
   <input type="button" οnclick="buttonMethod();" value=" 确定 " />  
   <input type="button" οnclick="close_window();" value=" 关闭 " /></center>
  </div>
  <div id="fade" class="black_overlay"></div>
</body>

</html>