html+css+js打字游戏网页

效果

html代码

html 复制代码

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>打字练习</title>
  <!--引入第三方动画库-->
  <link rel="stylesheet" href="animate.css">
  <style>
  html {
    height: 100%;
  }
  
  body {
    /*设置径向渐变的背景颜色*/
    background: radial-gradient(circle, #444, #000, #000);
    /*元素高度*/
    height: 100%;
    /*text-align属性指定元素文本的水平对齐方式。*/
    text-align: center;
    /*开启弹性布局*/
    display: flex;
    /*设置弹性布局的子元素水平方向居中排列*/
    justify-content: center;
    /*设置弹性布局的子元素水平方向居中排列*/
    align-items: center;
    /*设置元素外边距为0,因为元素默认自带8px外边距*/
    margin: 0;
    /*截取溢出内容元素，防止出现滚动条*/
    overflow: hidden;
  }
  
  #char {
    /*字体颜色*/
    color: lightgreen;
    /*字体大小*/
    font-size: 400px;
    /*设置文字阴影效果，语法是
        text-shadow:水平阴影的位置 垂直阴影的位置 模糊的距离 阴影的颜色;
        位置允许负值
        */
    text-shadow: 0 0 50px black;
  }
  
  #result {
    /*文字颜色*/
    color: #555;
  }
  
  #char.error {
    /*文字颜色*/
    color: yellow;
  }
  </style>
</head>

<body>
  <main>
    <section id="char">H</section>
    <section id="result">请在键盘上按下屏幕上显示的字母</section>
  </main>
  <script src="dazi.js"></script>
</body>

</html>

引入动画库文件

js代码

javascript 复制代码

// 设置一系列的变量
var code;
var okCount = 0;
var errorCount = 0;

// 获取DOM节点char
var charBox = document.querySelector('#char');

// 获取26个英文字母
function show() {
  
  // 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：
  var rand = Math.random();
  
  // 获取到0~25之间的数字
  code = rand * 26;
  
  // 将code向下取整，最终获取到0~25一共26个整数
  code = Math.floor(code);
  
  // 因为在ACSII编码表中对应A-Z 26个字母对应的编码为65-90;
  code = code + 65;
  
  // 将ACSII 编码转为一个字符:
  var char = String.fromCharCode(code);
  
  // 将获取到的26个字母插入到char DOM节点里
  charBox.innerText = char;
}
// 调用show函数让它执行
show()

//onkeyup 事件会在键盘按键被松开时发生
	window.onkeyup = function(ev) {
		
    // 获取按下的键盘按键Unicode值
    var key = ev.keyCode;
	
    // 当键盘按下的字母对应的Unicode值等于出现的值，执行以下代码
    if (key == code) {
		
      // 正确个数+1
      okCount++;
	  
      // 再一次执行show函数
      show();
	  
      // 给 charBox 添加动画效果
      charBox.className = 'animated zoomIn';
	  
      // 延迟500毫秒执行clearAnimate函数
      // 若不清除class类名，则下一次出现不会产生效果
      setTimeout(clearAnimate, 500);
    } else {
		
      // 错误个数+1
      errorCount++;
	  
      // 给 charBox 添加动画效果
      charBox.className = 'animated shake error';
	  
      // 延迟500毫秒执行clearAnimate函数
      // 若不清除class类名，则下一次出现不会产生效果
      setTimeout(clearAnimate, 500);
    }
    // 调用showResult函数并执行一次
    showResult();
  }
  // 清除动画效果的函数
function clearAnimate() {
	
  charBox.className = "animated";
}
// 正确个数，错误个数，正确率的函数
function showResult() {
	
  // 计算正确率
  var ratio = 100 * okCount / (okCount + errorCount);
  
  // 将计算后的正确个数，错误个数，正确率插入到id为result的标签内
  document.querySelector('#result').innerText =
    '正确 ' + okCount + ' 个，' +
    '错误 ' + errorCount + ' 个，' +
    // toFixed(2) 保留小数点后两位
    '正确率 ' + ratio.toFixed(2) + '%'
}