html+css+js打字游戏网页

server/2024/11/29 8:17: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/server/145850.html

相关文章

Unity类银河战士恶魔城学习总结(P150 End Screen结束重启按钮)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了死亡后重新启动游戏&#xff0c;并且加入了游戏管理器 加入了重新开始游戏的按钮 GameManager.cs using System.Collection…

富文本编辑器图片上传并回显

1.概述 在代码业务需求中&#xff0c;我们会经常涉及到文件上传的功能&#xff0c;通常来说&#xff0c;我们存储文件是不能直接存储到数 据库中的&#xff0c;而是以文件路径存储到数据库中&#xff1b;但是存储文件的路径到数据库中又会有一定的问题&#xff0c;就是 浏览…

【论文阅读】Learning to Learn Task-Adaptive Hyperparameters for Few-Shot Learning

学习任务自适应超参数以实现小样本学习 引用&#xff1a;Baik, Sungyong, et al. “Learning to learn task-adaptive hyperparameters for few-shot learning.” IEEE Transactions on Pattern Analysis and Machine Intelligence 46.3 (2023): 1441-1454. 论文地址&#xff1…

Python爬虫爬取网页小说

分析 注意&#xff1a;不同小说url不同&#xff0c;不同小说需采用的正则也不同 1.安装requests包 pip install requests2.导入必要的库 re模块用于进行正则表达式相关的操作&#xff0c;比如使用正则表达式在获取到的网页文本内容中匹配提取特定格式的信息。 resquests模块用…

Python学习35天

# 定义父类 class Computer: CPUNone MemoryNone diskNone def __init__(self,CPU,Memory,disk): self.disk disk self.Memory Memory self.CPU CPU def get_details(self): return f"CPU:{self.CPU}\tdisk:{self.disk}\t…

C语言蓝桥杯组题目

系列文章目录 文章目录 系列文章目录前言题目第一题.1, 2, 3, 4 能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f;第二题: 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上168又是一个完全平方数&#xff0c;请问该数是多少&…

css3弹性布局

CSS3的弹性布局&#xff08;Flexbox&#xff09;是一种强大的布局模式&#xff0c;用于创建灵活且响应式的布局结构。它使得容器内的项目能够更智能地分配空间&#xff0c;并且可以轻松调整它们的对齐方式。下面是一些关键概念和示例代码来帮助你更好地理解和使用Flexbox。 基…

【Linux网络编程】第二弹---Socket编程入门指南:从IP、端口号到传输层协议及编程接口全解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】 目录 1、Socket 编程预备 1.1、理解源 IP 和目的 IP 1.2、认识端口号 1.2.1、端口号范围划分 1.2.2、理解 &q…