当前位置： 首页 > news >正文

js+html实现打字游戏v1

news 2025/12/16 6:52:04

实现逻辑：设置定时器每秒刷新一次，定时器刷新多少次执行一次生成单词操作来决定单词的生成速度，例如初始单词生成速度为1，那么定时器刷新5次才生成一次单词，每个单词用span来装，每组10个单词放到div里。监听键盘按下事件，用一个变量str记录键盘连续按下的字母组成的字符串，当字符串str包含span中的字符串，则span变红，同时右下角得分数加1，当div中的一排span都变红时，从body里删掉该div。如果有高中必备3500单词作为单词库，每次生成的一组10个单词从中随机选取，效果更加，既能练习打字又能熟悉单词拼写。
上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">span{font-size: larger;margin: 20px;}#score{background-color: red;color: white;position: absolute;left:90%;top: 90%;}</style>
</head>
<span id="score">
0
</span><body>
<script>var content = "";var score = 0;//这里可以使用固定单词var words= ["apple","horizontal","vertical","vector","ghost","evil","banana","polo","curve","deploy"];var str = '';var count = 0;//单词生成速度，可以根据当前得分来设置，得分越高速度越快，比如当得分大于200时速度设为2，大于300百是速度设为3var speed = 1;setInterval(()=>{if(count%(6-speed)===0){let divElement = document.createElement('div');for (var i = 0; i <words.length ; i++) {var rand = Math.floor(Math.random()*words.length);var span = document.createElement('span');span.innerText = words[rand];divElement.appendChild(span);document.body.appendChild(divElement);}}count++;},1000)document.addEventListener("keydown",function (event) {str+=event.key;console.log(str);var spans = document.getElementsByTagName('span');var matchCnt = 0;for (var i = 0; i <spans.length ; i++) {if(str.includes(spans[i].innerText)){spans[i].style.color = 'red'score++;matchCnt++;}}if(matchCnt>0){str = '';}document.getElementById('score').innerText = score;//清除全部打出的一行var divs = document.getElementsByTagName('div');for (var i = 0; i <divs.length ; i++) {var children = divs[i].children;var redCnt = 0;for (var j = 0; j <children.length ; j++) {if(children[j].style.color === 'red'){redCnt++;}}if(redCnt===children.length){document.body.removeChild(divs[i]);}}});</script>
</body>
</html>

相关文章：

js+html实现打字游戏v1

实现逻辑&#xff1a;设置定时器每秒刷新一次&#xff0c;定时器刷新多少次执行一次生成单词操作来决定单词的生成速度&#xff0c;例如初始单词生成速度为1&#xff0c;那么定时器刷新5次才生成一次单词&#xff0c;每个单词用span来装&#xff0c;每组10个单词放到div里。监听…...

编程日记 2023/9/5 8:09:06

Java on VS Code 8月更新｜反编译器用户体验优化、新 Maven 项目工作流、代码高亮稳定性提升

作者&#xff1a;Nick Zhu 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎来到 Visual Studio Code for Java 的 8 月更新&#xff01;在这篇博客中&#xff0c;我们将为您提供有关反编译器支持的更多改进。此外&#xff0c;我们将展示如何创建没有原型的 Maven 项目以及一…...

编程日记 2023/9/5 8:08:04

划分Vlan时需要注意的问题

网络部分2019年才开始学习的&#xff0c;在学习过程中配置了整个公司的网络&#xff0c;心里才有了一点把握&#xff0c;算是掌握了最基本的。 不会的就上网学&#xff0c;反正网络上什么知识都有&#xff0c;只要有需求就对照着学&#xff0c;很长时间没有学习网络了&#xff…...

编程日记 2023/9/5 8:07:02

【广州华锐互动】利用AR远程指导系统进行机械故障排查，实现远程虚拟信息互动

随着工业自动化和智能化的不断发展&#xff0c;机械故障诊断已经成为了工业生产中的重要环节。为了提高故障诊断的准确性和效率&#xff0c;近年来&#xff0c;AR&#xff08;增强现实&#xff09;远程协助技术逐渐应用于机械故障诊断领域。本文将探讨AR远程协助技术在机械故障…...

编程日记 2023/9/5 8:06:01

Spring工具类--CollectionUtils的使用

原文网址&#xff1a;Spring工具类--CollectionUtils的使用_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Spring的CollectionUtils的使用。 CollectionUtils工具类的作用&#xff1a;操作Collection&#xff0c;比如&#xff1a;List、Set。 判断 方法作用static boolean is…...

编程日记 2023/9/5 8:04:59

Node.js 应用的御用品： Node.js 错误处理系统

开发中&#xff0c;有些开发者会积极寻求处理错误&#xff0c;力求减少开发时间&#xff0c;但也有些人完全忽略了错误的存在。正确处理错误不仅意味着能够轻松发现和纠正错误&#xff0c;而且还意味着能够为大型应用程序开发出稳健的代码库。 特别是对于 Node.js 开发人员&am…...

编程日记 2023/9/5 8:03:58

K210-CanMV IDE开发软件

K210-CanMV IDE开发软件 界面功能简介连接设备临时运行开机运行程序 界面功能简介 区域①菜单栏&#xff1a;操作文件&#xff0c;使用工具等。 区域②快捷按钮&#xff1a;区域①中的文件和编辑中部分功能的快捷方式。 区域③连接设备&#xff1a;连接设备和程序控制按钮。 …...

编程日记 2023/9/5 8:02:55

0301yarnmapredude入门-hadoop-大数据学习

文章目录 1 MapReduce概述2 YARN2.1 yarn概述2.2 yarn与MapReduce关系2.3 yarn架构2.4 辅助角色 3 MapReduce & YARN部署3.1 集群规划3.2 配置文件3.3 分发配置文件 4 体验4.1 集群启动命令介绍4.2 提交MapReduce任务到YARN执行 结语 1 MapReduce概述 分布式计算是一种计算…...

编程日记 2023/9/5 8:01:53

大数据课程K15——Spark的TF-IDF计算Term权重

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 了解Spark的TF-IDF算法概念； ⚪ 了解Spark的TF-IDF算法定义； ⚪ 了解Spark的TF-IDF算法案例； 一、TF-IDF算法概述 TF-IDF（term frequency–inverse document frequency）是一种用于信…...

编程日记 2023/9/5 8:00:52

【C语言】字符函数，字符串函数，内存函数

大家好&#xff01;今天我们来学习C语言中的字符函数&#xff0c;字符串函数和内存函数。 目录 1. 字符函数 1.1 字符分类函数 1.2 字符转换函数 1.2.1 tolower&#xff08;将大写字母转化为小写字母&#xff09; 1.2.2 toupper&#xff08;将小写字母转化为大写字母&…...

编程日记 2023/9/5 7:59:51

Spring MVC：域对象共享数据

Spring MVC 前言域对象共享数据使用 ModelAndView 向 request 域对象中共享数据使用 Map 、Model 或 ModelMap 向 request 域对象中共享数据使用 SesionAttributes 注解向 session 域对象中共享数据使用 Servlet API 向 application 域对象中共享数据 附 前言 在上一章中&…...

编程日记 2023/9/5 7:58:49

Vue框架--Vue中的计算属性

下面&#xff0c;我们来实现一个这样的需求。 实现输入框1和输入框2中文字内容的拼接。...

编程日记 2023/9/5 7:57:48

面试题-React(八)：React如何实现插槽？

一、React插槽的概念 插槽是一种让组件变得更加灵活和可复用的技术。它允许我们在组件内部预留一些位置&#xff0c;然后在组件使用时填充这些位置&#xff0c;实现外部内容的嵌套。 二、实现React插槽的方法 在React中&#xff0c;实现插槽可以通过两种方式&#xff1a;pro…...

编程日记 2023/9/5 7:56:46

【前端demo】动态赋值CSS

文章目录 效果过程html实现oninput与onchange事件统一配置CSS 代码HTMLCSSJS 其他demo 效果 动态显示CSS样式&#xff0c;由:root统一配置。 效果预览&#xff1a;https://codepen.io/karshey/pen/BavLrwy 参考&#xff1a; Dynamic CSS Variables(codepen.io) 漫谈document…...

编程日记 2023/9/5 7:55:45

BlockUI专栏目录

文章作者&#xff1a;里海 来源网站&#xff1a;王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C-CSDN博客 简介&#xff1a; BlockUI是一个设计NX对话框的工具&#xff0c;是官方推荐使用的对话框制作方法&#xff0c;能够与NX自身风格相统一&#xff0c;并且在实际…...

编程日记 2023/9/5 7:54:44

K8S获取连接token

1、创建一个具有管理员权限的账户 下载或拷贝文件到主机上&#xff0c;vi k8s-admin.yml --- apiVersion: v1 kind: ServiceAccount metadata:name: dashboard-adminnamespace: kube-system --- kind: ClusterRoleBinding apiVersion: rbac.authorization.k8s.io/v1beta1 met…...

编程日记 2023/9/5 7:53:41

CountDownLatch原理-（主线程等待子线程结束再执行）

CountDownLatch是共享锁的一种实现,它默认构造 AQS 的 state 值为 count。当线程使用countDown方法时,其实使用了tryReleaseShared方法以CAS的操作来减少state,直至state为0就代表所有的线程都调用了countDown方法。当调用await方法的时候&#xff0c;如果state不为0&#xff0…...

编程日记 2023/9/5 7:52:40

mybatis源码学习-3-解析器模块

写在前面,这里会有很多借鉴的内容,有以下三个原因 本博客只是作为本人学习记录并用以分享,并不是专业的技术型博客笔者是位刚刚开始尝试阅读源码的人,对源码的阅读流程乃至整体架构并不熟悉,观看他人博客可以帮助我快速入门如果只是笔者自己观看,难免会有很多弄不懂乃至理解错误…...

编程日记 2023/9/5 7:51:39

解决微信小程序recycle-view使用百分比单位控制宽高时出现的内容溢出问题

recycle-view是微信小程序官方推出的一个经过优化的长列表组件&#xff0c;但是在使用百分比单位控制高宽时有个内容溢出问题&#xff0c;虽然它提供了height和width的参数可以设置宽高&#xff0c;但每次写列表都需要去js里获取宽高并设置是较为麻烦的&#xff0c;所以现在来着…...

编程日记 2023/9/5 7:50:37

如何使用蚂蚁集团自动化混沌工程 ChaosMeta 做 OceanBase 攻防演练？

当前&#xff0c;业界主流的混沌工程项目基本只关注如何制造故障的问题&#xff0c;而经常做演练相关工作的工程师应该明白&#xff0c;每次演练时还会遇到以下痛点&#xff1a; 检测当前环境是否符合演练预设条件&#xff08;演练准入&#xff09;&#xff1b; 业务流量是否满…...

编程日记 2023/9/5 7:49:36

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2025/12/10 10:18:18

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/12/11 10:24:33

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/12/13 5:55:42

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/12/9 12:17:40

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/12/13 23:39:33

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/11/2 1:48:43