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

js+html实现打字游戏v1

news 2025/8/29 21:58:35

实现逻辑：设置定时器每秒刷新一次，定时器刷新多少次执行一次生成单词操作来决定单词的生成速度，例如初始单词生成速度为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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/8/29 16:43:43

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/8/29 18:23:54

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/8/22 5:00:36

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/8/10 12:51:07

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/8/26 18:48:34

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2025/8/22 6:01:19

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2025/8/22 3:35:26

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类，这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前，需要明确协议的具体格式。例如，一个简单的…...

编程新知 2025/8/26 10:04:21