html+css+js打字游戏网页

ops/2024/11/28 19:35:27/
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/ops/137451.html

相关文章

一次SQL注入深入利用

1. 在寻找某处的资产时找到一个查询的页面&#xff1a; https://xxxxxxxxxxx/index.php/all 随便查询一下&#xff0c;然后抓包: 测试发现这里存在注入&#xff1a; 由于有报错信息&#xff0c;首先考虑报错注入&#xff1a; Poc&#xff1a; andupdatexml(0x7e,concat(0x7e,…

计算机网络----基本概念

基本概念 在这一章从整体上介绍计算机网络的概况, 为后续的学习搭建起整体的框架; 介绍计算机网络中的基础术语和概念; 什么是因特网 『 因特网 』是一个世界范围内互联了数以亿计的计算设备的计算机网络; 因特网具体构成 因特网互联了数以亿计的计算设备, 这些设备被称为…

【软考速通笔记】系统架构设计师⑤——软件工程基础知识

文章目录 一、前言二、基础知识点2.1 软件危机2.2 软件生命周期 三、软件过程模型&#xff08;论文&#xff09;3.1 瀑布模型3.2 原型模型3.3 螺旋模型3.4 敏捷模型3.5 软件统一过程模型3.6 软件成熟度模型3.7 软件成熟度模型集成 四、需求工程五、软件测试5.1 根据程序执行状态…

QT 实现窗口关闭动画

1.实现效果 两种关闭窗口动画效果。 下坠式关闭动画。 中心式关闭动画 2.实现思路 创建了两个动画并行执行,一个是控制窗口尺寸的动画,一个是控制透明度的动画。 先创建一个closeAnimation动画,然后创建opacityAnimation动画,创建一个QParallelAnimationGroup并行动画…

房屋出租出售预约系统支持微信小程序+H5+APP

核心功能有&#xff1a;新盘销售、房屋租赁、地图找房、小区找房&#xff0c;地铁找房等方式。 地图找房&#xff1a;通过地图标注查看附近房源&#xff0c;方便用户根据地理位置查找合适的房产。二手房资讯&#xff1a;提供租房及二手房市场的相关资讯&#xff0c;帮助用户了…

【系统架构设计师】真题论文: 论非功能性需求对企业应用架构设计的影响(包括解题思路和素材)

更多内容请见: 备考系统架构设计师-专栏介绍和目录 文章目录 真题题目(2014年 试题1)解题思路论文素材参考非功能性需求的主要类型非功能性需求对企业应用架构设计的影响真题题目(2014年 试题1) 企业应用架构(Enterprise Application Architecture) 描述了企业 IT 系统的…

建造者模式Builder——优雅的使用姿势

在面向对象设计中&#xff0c;建造者模式&#xff08;Builder Pattern&#xff09; 是一种非常经典的设计模式&#xff0c;特别适用于需要构造复杂对象的场景。Lombok 提供的 Builder 注解极大简化了 Builder 模式的实现&#xff0c;而 toBuilder true 则进一步增强了它的灵活…

二叉树:堆的建立和应用

在建立堆之前&#xff0c;我们要知道什么是树和二叉树 树 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个结点组成的一个具有层次关系的集合&#xff0c;之所以把它叫做树&#xff0c;是因为它长得像一棵倒挂的树&#xff0c;也就是根在上面&…