html+css+js打字游戏网页

devtools/2024/11/27 12:59:20/
htmledit_views">

1. 效果

2. 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>

2. 引入动画库文件

 

3. js代码

html" title=javascript>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) {// 正确个数+1okCount++;// 再一次执行show函数show();// 给 charBox 添加动画效果charBox.className = 'animated zoomIn';// 延迟500毫秒执行clearAnimate函数// 若不清除class类名,则下一次出现不会产生效果setTimeout(clearAnimate, 500);} else {// 错误个数+1errorCount++;// 给 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) + '%'
}


http://www.ppmy.cn/devtools/137391.html

相关文章

网站布局编辑器前端开发:设计要点与关键考量

一、设计说明 &#xff08;一&#xff09;功能模块 可视化操作区域 这是用户进行网站布局设计的主要画布。通过拖放各种页面元素&#xff08;如文本框、图片、按钮、导航栏等&#xff09;到该区域&#xff0c;用户能够直观地构建网站页面的布局结构。支持对元素的实时缩放、旋…

【Linux】网络通信

TCP协议是一个安全的、面向连接的、流式传输协议&#xff0c;所谓的面向连接就是三次握手&#xff0c;对于程序猿来说只需要在客户端调用connect()函数&#xff0c;三次握手就自动进行了。先通过下图看一下TCP协议的格式&#xff0c;然后再介绍三次握手的具体流程。 TCP的三次握…

Wireshark抓取HTTPS流量技巧

一、工具准备 首先安装wireshark工具&#xff0c;官方链接&#xff1a;Wireshark Go Deep 二、环境变量配置 TLS 加密的核心是会话密钥。这些密钥由客户端和服务器协商生成&#xff0c;用于对通信流量进行对称加密。如果能通过 SSL/TLS 日志文件&#xff08;例如包含密钥的…

C#中面试的常见问题008

1.内存泄露 内存泄露的原因&#xff1a; 未释放动态分配的内存&#xff1a;在使用malloc、new等动态内存分配函数后&#xff0c;未能正确释放内存。引用计数错误&#xff1a;在引用计数管理内存的语言中&#xff0c;增加引用计数但未相应减少&#xff0c;导致内存无法释放。循…

鸿蒙HarmonyOS系统相机Camera相关API使用

HarmonyOS下Camera相机相关API使用 准备工作 1. 导入camera接口 import { camera } from kit.CameraKit; import { BusinessError } from kit.BasicServicesKit; import { common } from kit.AbilityKit;2.获取cameraManager对象 getCameraManager(): camera.CameraManager…

【工作总结】2. 链路追踪与 APM 系统构建

文章目录 0. 一些资料收集1. 背景 0. 一些资料收集 感谢开源社区资料&#xff0c;写在前面。 什么是 APM 系统&#xff1f;如何设计与实现&#xff1f; 1. 背景 近期&#xff0c;云原生微服务这块的业务搭建的差不多了。针对一些历史技术债准备拉出来解决。我这边就负责 链…

Vue.js基础——贼简单易懂!!(响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind)

Vue.js是一个渐进式JavaScript框架&#xff0c;用于构建用户界面。它专门设计用于Web应用程序&#xff0c;并专注于视图层。Vue允许开发人员创建可重用的组件&#xff0c;并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统&#xff0c;用于高效地渲染和重新渲染组件。Vue以…

C语言数据结构——详细讲解《栈》

C语言数据结构——详细讲解《栈》 前言一、栈的概念二、栈的定义三、栈的操作1.初始化栈2. 入栈操作3. 出栈操作4. 获取栈顶元素5. 检查栈是否为空6.释放栈内存 四、栈的例题五、本文的所有代码Stack.cStack,h最后一题代码 前言 在 C 语言编程中&#xff0c;数据结构是非常重要…