zoukankan      html  css  js  c++  java
  • 打字游戏

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin:0;padding: 0}
    div{
    font-size: 60px;
    position: absolute;
    }
    </style>
    </head>
    <body>
    <P>得分:</P>
    </body>
    </html>
    <script src="../../common.js"></script>
    <script>
    setInterval(function(){
      var n = numRandom(65,122);
      while(n>=91 && n<=96){
        n = numRandom(65,122);
      }
      var char = String.fromCharCode(n);
      var div = document.createElement("div");
      div.innerText = char;
      div.style.left = numRandom(200,1200) + 'px';
      div.style.top = 0;
      div.style.color = randomColorTo();
      move(div);
      document.body.appendChild(div);
    },500)
    function move(ele){
      ele.timer = setInterval(function(){
        var speed = numRandom(1,3);
        if(ele.offsetTop >=500){
          ele.remove();
          clearInterval(ele.timer);
        }else{
          ele.style.top = ele.offsetTop + speed +'px';
        }
      },30)
    }
    document.onkeypress = function(e){
      var e = e || event;
      var code = e.keyCode || e.which;
      var str = String.fromCharCode(code);
      var aDiv = document.getElementsByTagName("div");
      for(var i=0;i<aDiv.length;i++){
        if(str == aDiv[i].innerText){
          aDiv[i].remove();
          break;
        }
      }
    }
    </script>
  • 相关阅读:
    mysql插入中文数据变成问号怎么处理
    项目第二阶段
    项目第一阶段
    项目测试
    常用mysql操作
    常用的mysql操作
    mysql操作
    土地档案管理系统需求分析
    土地档案管理系统架构图,ER图,用例图
    Load data local infile
  • 原文地址:https://www.cnblogs.com/asablog/p/10731718.html
Copyright © 2011-2022 走看看