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

HTML实现每天单词积累

news 文章来源：https://blog.csdn.net/joe_g12345/article/details/134885717 2024/12/29 1:39:34

注册页面

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>注册</title><style>body {font-family: Arial, sans-serif;background-color: #f5f5f5;}form {max-width: 500px;margin: 50px auto;padding: 40px;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.2);border-radius: 6px;}h1 {font-size: 36px;text-align: center;margin-top: 0;color: #2c3e50;text-shadow: 1px 1px 0 #fff;}label {display: block;margin-bottom: 10px;color: #2c3e50;text-shadow: 1px 1px 0 #fff;font-size: 18px;}input {padding: 10px;width: 100%;border: 1px solid #ccc;border-radius: 4px;margin-bottom: 20px;box-sizing: border-box;font-size: 16px;color: #2c3e50;}input:focus {outline: none;border-color: #51a6ff;}input[type="checkbox"] {width: auto;margin-top: 10px;margin-right: 5px;}button[type="submit"] {padding: 12px 24px;background-color: #51a6ff;color: #fff;border: none;border-radius: 4px;cursor: pointer;transition: all 0.3s ease;font-size: 20px;}button[type="submit"]:hover {background-color: #0072c6;}.error {color: #ff4d4d;font-size: 14px;margin-top: 5px;}</style>
</head>
<body><form><h1>注册</h1><label>用户名：</label><input type="text" name="username" required><label>密码：</label><input type="password" name="password" required><label>确认密码：</label><input type="password" name="confirm_password" required><center><label><input type="checkbox" name="agree" required>我已同意<a href="#">注册协议</a></label></center><p style="text-align: right;"><button type="submit">注册</button></p></form>
</body>
</html>

背单词页面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>背单词软件</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}.container {max-width: 800px;margin: 0 auto;padding: 20px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}h1 {text-align: center;color: #333;}.word {font-size: 36px;color: #333;text-align: center;margin: 40px 0;}.definition {font-size: 24px;color: #666;text-align: center;margin-bottom: 40px;}.button {display: block;margin: 0 auto;padding: 10px 30px;border-radius: 5px;background-color: #333;color: #fff;font-size: 18px;text-align: center;cursor: pointer;}.button:hover {background-color: #555;}</style></head><body><div class="container"><h1>背单词软件</h1><div class="word">apple</div><div class="definition">n. 苹果</div><button class="button" onclick="showNext()">下一个</button></div><script>// 单词和定义列表var words = [{ word: 'apple', definition: 'n. 苹果' },{ word: 'banana', definition: 'n. 香蕉' },{ word: 'orange', definition: 'n. 橘子' },{ word: 'grape', definition: 'n. 葡萄' },{ word: 'watermelon', definition: 'n. 西瓜' }];// 当前显示的单词索引var currentWordIndex = 0;// 显示下一个单词和定义function showNext() {currentWordIndex++;if (currentWordIndex >= words.length) {currentWordIndex = 0;}document.querySelector('.word').textContent = words[currentWordIndex].word;document.querySelector('.definition').textContent = words[currentWordIndex].definition;}</script></body>
</html>

作答题目

单词填空

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>填词游戏</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}.container {max-width: 800px;margin: 0 auto;padding: 20px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}h1 {text-align: center;color: #333;}.word {font-size: 36px;color: #333;text-align: center;margin: 40px 0;}.letter {display: inline-block;width: 30px;height: 30px;margin: 0 20px;font-size: 36px;line-height: 50px;text-align: center;border-radius: 5px;background-color: #fff;border: 2px solid #666;outline: none;cursor: text;}.letter:focus {border-color: #333;}.button {display: block;margin: 0 auto;padding: 10px 30px;border-radius: 5px;background-color: #333;color: #fff;font-size: 18px;text-align: center;cursor: pointer;}.button:hover {background-color: #555;}</style></head><body><div class="container"><h1>填写出正确的字母。</h1><div class="word">app<input type="text" class="letter" maxlength="1" autofocus><input type="text" class="letter" maxlength="1"></div><button class="button" onclick="checkAnswer()">提交</button></div><script>// 正确答案var correctAnswer = 'le';// 检查玩家输入的答案function checkAnswer() {var inputLetters = document.querySelectorAll('.letter');var playerAnswer = '';for (var i = 0; i < inputLetters.length; i++) {playerAnswer += inputLetters[i].value;}if (playerAnswer === correctAnswer) {alert('答对了！');} else {alert('答错了，请再试一次。');}}</script></body>
</html>

单词含义

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>选单词释义游戏</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}.container {max-width: 800px;margin: 0 auto;padding: 20px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}h1 {text-align: center;color: #333;}.word {font-size: 36px;color: #333;text-align: center;margin: 40px 0;}.options {margin: 40px 0;}.option {display: block;margin: 10px 0;padding: 10px 30px;border-radius: 5px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);color: #333;font-size: 24px;text-align: center;cursor: pointer;}.option:hover {background-color: #f0f0f0;}.button {display: block;margin: 0 auto;padding: 10px 30px;border-radius: 5px;background-color: #333;color: #fff;font-size: 18px;text-align: center;cursor: pointer;}.button:hover {background-color: #555;}</style></head><body><div class="container"><h1>选择单词的正确释义。</h1><div class="word">sophisticated</div><div class="options"><div class="option" data-answer="1">有学问的</div><div class="option" data-answer="0">简单的</div><div class="option" data-answer="0">笨拙的</div><div class="option" data-answer="0">愚蠢的</div></div><button class="button" onclick="checkAnswer()">提交</button></div><script>// 正确答案var correctAnswer = 1;// 检查玩家选择的答案function checkAnswer() {var options = document.querySelectorAll('.option');var playerAnswer = -1;for (var i = 0; i < options.length; i++) {if (options[i].classList.contains('selected')) {playerAnswer = parseInt(options[i].getAttribute('data-answer'));}options[i].classList.remove('selected');}if (playerAnswer === correctAnswer) {alert('答对了！');} else {alert('答错了，请再试一次。');}}// 为选项添加事件监听器var options = document.querySelectorAll('.option');for (var i = 0; i < options.length; i++) {options[i].addEventListener('click', function() {for (var j = 0; j < options.length; j++) {options[j].classList.remove('selected');}this.classList.add('selected');});}</script></body>
</html>

释义选择

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>选单词游戏</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;}.container {max-width: 800px;margin: 0 auto;padding: 20px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}h1 {text-align: center;color: #333;}.word {font-size: 36px;color: #333;text-align: center;margin: 40px 0;}.options {margin: 40px 0;}.option {display: block;margin: 10px 0;padding: 10px 30px;border-radius: 5px;background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);color: #333;font-size: 24px;text-align: center;cursor: pointer;}.option:hover {background-color: #f0f0f0;}.button {display: block;margin: 0 auto;padding: 10px 30px;border-radius: 5px;background-color: #333;color: #fff;font-size: 18px;text-align: center;cursor: pointer;}.button:hover {background-color: #555;}</style></head><body><div class="container"><h1>选出正确的单词。</h1><div class="word">苹果</div><div class="options"><div class="option" data-answer="0">banana</div><div class="option" data-answer="0">pear</div><div class="option" data-answer="1">apple</div><div class="option" data-answer="0">orange</div></div><button class="button" onclick="checkAnswer()">提交</button></div><script>// 正确答案var correctAnswer = 1;// 检查玩家选择的答案function checkAnswer() {var options = document.querySelectorAll('.option');var playerAnswer = -1;for (var i = 0; i < options.length; i++) {if (options[i].classList.contains('selected')) {playerAnswer = parseInt(options[i].getAttribute('data-answer'));}options[i].classList.remove('selected');}if (playerAnswer === correctAnswer) {alert('答对了！');} else {alert('答错了，请再试一次。');}}// 为选项添加事件监听器var options = document.querySelectorAll('.option');for (var i = 0; i < options.length; i++) {options[i].addEventListener('click', function() {for (var j = 0; j < options.length; j++) {options[j].classList.remove('selected');}this.classList.add('selected');});}</script></body>
</html>

HTML实现每天单词积累

注册页面 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>注册</title><style>body {font-family: Arial, sans-serif;background-color: #f5f5f5;}form {max-width: 500px;margin: 50px auto;padding: 40px…...

编程日记 2023/12/19 2:08:04

【ECMAScript笔记二】运算符分类，流程控制（顺序结构、分支结构、循环结构）

文章目录 4 运算符4.1 算术运算符4.2 递增和递减运算符4.3 比较运算符4.4 逻辑运算符4.5 赋值运算符4.6 运算优先级 5 流程控制5.1 顺序结构5.2 分支结构5.2.1 if 语句5.2.2 switch 语句 5.3 循环结构5.3.1 for循环5.3.2 while循环5.3.3 do while循环5.3.4 continue和break 5.4…...

编程日记 2023/12/19 2:06:02

ShenYu网关注册中心之Zookeeper注册原理

文章目录 1、客户端注册流程1.1、读取配置1.1.1、用于注册的 ZookeeperClientRegisterRepository1.1.2、用于扫描构建元数据和 URI 的 SpringMvcClientEventListener 1.2、扫描注解，注册元数据和URI1.2.1、构建URI并写入Disruptor1.2.2、构建元数据并写入Disrupto…...

编程日记 2023/12/19 2:05:01

高级C#技术（二）

前言本章为高级C#技术的第二节也是最后一节。前一节在下面这个链接高级C#技术https://blog.csdn.net/qq_71897293/article/details/134930989?spm1001.2014.3001.5501 匿名类型匿名类型如其名，匿名的没有指定变量的具体类型。举个例子： 1 创建…...

编程日记 2023/12/19 2:04:00

【性能测试】基础知识篇-压力模型

常见压力模式并发模式（即虚拟用户模式）和RPS模式（即Requests Per Second，每秒请求数，吞吐量模式）。本文介绍这两种压力模式的区别，以便根据自身业务场景选择更合适的压力模式。并发模式 …...

编程日记 2023/12/19 1:59:57

springboot-redis设置定时触发任务详解

最近研究了一下“redis定时触发”，网上查了查资料，这里记录一下。从Redis 2.8.0开始，Redis加入了发布/订阅模式以及键空间消息提醒（keyspace notification）功能。键空间消息提醒提供了允许客户端通过订阅指定信道获取…...

编程日记 2023/12/19 1:56:54

Video anomaly detection with spatio-temporal dissociation 论文阅读

Video anomaly detection with spatio-temporal dissociation 摘要1.介绍2.相关工作3. Methods3.1. Overview3.2. Spatial autoencoder3.3. Motion autoencoder3.4. Variance attention module3.5. Clustering3.6. The training objective function 4. Experiments5. Conclusio…...

编程日记 2023/12/19 1:54:52

svn 安装

安装系统 ubuntu 22 安装命令： sudo apt-get install subversion 创建第一个工程： 创建版本库、项目 1、先创建svn根目录文件夹 sudo mkdir /home/svn 2、创建项目的目录文件夹 sudo mkdir /home/svn/demo_0 svnadmin create /home/svn/demo_0 配置&a…...

编程日记 2023/12/19 1:53:51

slurm 23.11.0集群 debian 11.5 安装

slurm 23.11.0集群 debian 11.5 安装用途 Slurm(Simple Linux Utility for Resource Management， http://slurm.schedmd.com/ )是开源的、具有容错性和高度可扩展的Linux集群超级计算系统资源管理和作业调度系统。超级计算系统可利用Slurm对资源和作业进行管理&a…...

编程日记 2023/12/19 1:52:50

ffmpeg可以做什么

用途 FFmpeg是一个功能强大的多媒体处理工具，可以处理音频和视频文件。它是一个开源项目，可在各种操作系统上运行，包括Linux、Windows和Mac OS X等。以下是FFmpeg可以做的一些主要任务： 转换媒体格式：可将一个媒体格式…...

编程日记 2023/12/19 1:50:47

一种缩小数据之间差距的算法

先上代码： /** * 缩小数据之间的差距，但是大小关系不变的方法* param {Array} features */function minMaxData(data) {for (let i 0; i < data.length; i) {const f data[i];const x f[1];const yf[2];//此处5根据实际情况设置const y2 Math.pow(…...

编程日记 2023/12/19 1:47:44

【Axure RP9】动态面板使用------案例：包括轮播图和多方式登入及左侧菜单栏案例

目录一动态面板简介 1.1 动态面板是什么二轮播图 2.1 轮播图是什么 2.2 轮播图应用场景 2.3 制作实播图三多方式登入 3.1多方式登入是什么 3.3 多方式登入实现四左侧菜单栏 4.1左侧菜单栏是什么 4.2 左侧菜单栏实现一动态面板简介 1.1 动态面板是什么…...

编程日记 2023/12/19 1:46:43

在接口实现类中，加不加@Override的区别

最近的软件构造实验经常需要设计接口，我们知道Override注解是告诉编译器，下面的方法是重写父类的方法，那么单纯实现接口的方法需不需要加Override呢？ 定义一个类实现接口，使用idea时，声明implements之后会…...

编程日记 2023/12/19 1:42:39

优质全套SpringMVC教程

三、SpringMVC 在SSM整合中，MyBatis担任的角色是持久层框架，它能帮我们访问数据库，操作数据库 Spring能利用它的两大核心IOC、AOP整合框架 1、SpringMVC简介 1.1、什么是MVC MVC是一种软件架构的思想（不是设计模式-思想就是我们…...

编程日记 2023/12/19 1:40:38

微信小程序---使用npm包安装Vant组件库

在小程序项目中，安装Vant 组件库主要分为如下3步: 注意：如果你的文件中不存在pakage.json，请初始化一下包管理器 npm init -y 1.通过 npm 安装(建议指定版本为1.3.3） 通过npm npm i vant/weapp1.3.3 -S --production 通过y…...

编程日记 2023/12/19 1:38:35

GPT-4V被超越？SEED-Bench多模态大模型测评基准更新

📖 技术报告 SEED-Bench-1：https://arxiv.org/abs/2307.16125 SEED-Bench-2：https://arxiv.org/abs/2311.17092 🤗 测评数据 SEED-Bench-1：https://huggingface.co/datasets/AILab-CVC/SEED-Bench SEED-Bench-2&…...

编程日记 2023/12/19 1:35:33

数据库_mongoDB

1 介绍 MongoDB 是一种 NoSQL 数据库，它将每个数据存储为一个文档，这里的文档类似于 JSON/BSON 对象，具体数据结构由键值（key/value）对组成。字段值可以包含其他文档，数组及文档数组。其数据结构非常松散&…...

编程日记 2023/12/19 1:29:27

Layui实现自定义的table列悬停事件并气泡提示信息

1、概要使用layui组件实现table的指定列悬停时提示信息，因为layui组件中没有鼠标悬停事件支持，所以需要结合js原生事件来实现这个功能，并结合layui的tips和列的templte属性气泡提示实现效果。 2、效果图 3、代码案例 <!DOCTYPE html&g…...

编程日记 2023/12/19 1:26:25

Tomcat从认识安装到详细使用

文章目录一.什么是Tomact?二.Tomcat的安装1.下载安装包2.一键下载3.打开Tomcat进行测试4.解决Tomcat中文服务器乱码三.Tomcat基本使用1.启动与关闭Tomcat2.Tomcat部署项目与浏览器访问项目四.Tomcat操作中的常见问题1.启动Tomcat后，启动窗口一闪而过&#xff1f…...

编程日记 2023/12/19 1:25:24

07-Eventing及实践

1 Knative Eventing的相关组件 Knative Eventing具有四个最基本的组件：Sources、Brokers、Triggers 和 Sinks 事件会从Source发送至SinkSink是能够接收传入的事件可寻址（Addressable）或可调用（Callable）资源 Knative S…...

编程日记 2023/12/19 1:20:19

Linux下Netty实现高性能UDP服务

前言近期笔者基于Netty接收UDP报文进行业务数据统计的功能，因为Netty默认情况下处理UDP收包只能由一个线程负责，无法像TCP协议那种基于主从reactor模型实现多线程监听端口，所以笔者查阅网上资料查看是否有什么方式可以接收UDP收包的性能瓶颈…...

编程日记 2023/12/19 1:19:18

Ubuntu 22.04 Tesla V100s显卡驱动，CUDA，cuDNN，MiniCONDA3 环境的安装

今天来将由《蓝创精英团队》带来一个Ubuntu 显卡环境的安装，主要是想记录下来，方便以后快捷使用。主要的基础环境显卡驱动 (nvidia-smi)CUDA (nvidia-smi 可查看具体版本)cuDNN (cuda 深度学习加速库)Conda python环境管理(Miniconda3) Nvidia 驱动…...

编程日记 2023/12/19 1:17:17

FFmpeg转码流程和常见概念

视频格式：mkv，flv，mov，wmv，avi，mp4，m3u8，ts等等 FFmpeg的转码工具，它的处理流程是这样的： 从输入源获得原始的音视频数据，解封装得到压缩封装的音…...

编程日记 2023/12/19 1:16:16

【01】GeoScene生产海图或者电子航道图

1.1 什么是电子海图制图模块 GeoScene海事模块是一个用于管理和制作符合国际水文组织（IHO）S-100系列标准和S-57标准的海事数据的系统。提供了S-100和S-57工具，用于加载基于S-100的要素目录、创建基于S-57传输结构的数据、输入数据、符号化数…...

编程日记 2023/12/19 1:14:14

TWS蓝牙耳机的船运模式

TWS蓝牙耳机的船运模式是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群赠送语音信号处理降噪算法，蓝牙耳机音频，DSP音频项目核心开发资料, TWS蓝牙耳机的船运模式是指在将耳机从一个地方运送到另一个地方时，…...

编程日记 2023/12/19 1:10:10

Vue系列之指令 v-html

文章の目录 1、v-html指令2、基本用法写在最后 1、v-html指令 v-html 指令类似于 v-text 指令，它与 v-text 区别在于 v-text 输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出，类似于 JavaScrip…...

编程日记 2023/12/19 1:08:09

Mac如何安装stable diffusion

今天跟大家一起在Mac电脑上安装下stable diffusion，在midjourney等模型收费的情况下如何用自己的电脑算力用上免费的画图大模型呢？来吧一起实操起来一、安装homebrew 官网地址：Homebrew — The Missing Package Manager for macOS (or Lin…...

编程日记 2023/12/19 1:05:06

Kubernetes (k8s) 快速认知

应用部署方式传统部署时代早期的时候，各个组织是在物理服务器上运行应用程序。缺点资源分配问题： 无法限制在物理服务器中运行的应用程序资源使用维护成本问题： 部署多个物理机，维护许多物理服务器的成本很高虚拟化部署时…...

编程日记 2023/12/19 1:04:05

Electron V28主进程与渲染进程互相通信总结

本文示例采用ElectronVue3TS编写，请读者理顺思路，自行带入自己的项目。注： 读本文前请先搞懂什么是主进程，什么是渲染进程。在Electron中有着ipcMain和ipcRenderer、contextBridge模块，以及创建窗口对象上的webCont…...

编程日记 2023/12/19 1:03:04

MySQL主从复制详解

目录 1. 主从复制的工作原理 1.1. 主从复制的角色 1.2. 主从复制的流程 2. 配置MySQL主从复制 2.1. 确保主服务器开启二进制日志 2.2. 设置从服务器 2.3. 连接主从服务器 2.4. 启动复制 3. 主从复制的优化与注意事项 3.1. 优化复制性能 3.2. 注意复制延迟 3.3. 处理…...

编程日记 2023/12/19 0:57:58

wordpress 悬浮登录/怎么做网站教程视频

我们在使用Excel的过程中，为了核对有无遗漏，需要统计一张Excel表格里有内容的单元格的数量，也就是统计有内容的单元格个数，在Excel中可以使用Counta函数来解决这个问题。我们举一个例子，下面这张表，单元格中…...

编程日记 2024/12/29 0:49:24

广州做网站一般要多少钱?/上海专业的网络推广

上一篇camera前后摄像头同时预览的后续，前后摄像头同时录像。直接上重要的代码就好，新手，写得不好的欢迎提出，见谅。 /** * 初始化控件以及回调 */ private void init() { surfaceview1 (SurfaceView) this.findViewById(R.id.s…...

编程日记 2024/12/28 23:17:11

做个网站多少钱找谁做/360关键词指数查询

目录 1.邻接矩阵（adjacency matrix） 2.无向图的邻接矩阵表示 3.有向图的邻接矩阵表示 4.网的邻接矩阵表示 5.示例源代码 1.邻接矩阵（adjacency matrix） （1）用一维数组存储顶点信息 （2&am…...

编程日记 2024/12/28 16:55:30

企业备案网站服务内容/推广普通话的意义论文

在使用Exists时，如果能正确使用，有时会提高查询速度： 1，使用Exists代替inner join 2，使用Exists代替 in 1，使用Exists代替inner join例子: 在一般写sql语句时通常会遇到如下语句： 两个表连接时&…...

编程日记 2024/12/28 12:49:48

怎么自己做个免费网站吗/线上营销怎么推广

爬虫的使用过程中，网站最简单的反爬虫就是验证发起请求的客户端是否为浏览器，因此需要爬虫模拟浏览器对网站发起请求。这里介绍一个fake_useraent 1、伪造useragent字符串，每次请求都使用随机生成的useragen 为了减少复杂度，随机…...

编程日记 2024/12/28 12:14:29

游戏网站建设成功案例/seo线上培训班

包括：数字仿真算法、微分方程模型、传递函数模型、状态方程模型、模型转换、控制系统建模。6.1 控制系统的数学描述6.1.1 数学仿真算法改进的欧拉法龙格—库塔法1、改进的欧拉法(1) 数学含义：对于一阶微分方程假定y(0)y0已给定，可求得t0处y…...

编程日记 2024/12/28 9:58:05