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

前端小练习————表白墙+猜数字小游戏

1,猜数字游戏

实现一个这个样式的

要猜的目标数字

点击重新开始游戏之后:

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字:<input type="text" id="number"><button type="button" id="guess">猜</button><br>已经猜的次数: <span id="count">0</span><br>结果: <span id="result"></span><script>$(function(){let guessnumber = Math.floor(Math.random()*100)let count = 0;console.log(guessnumber);$("#guess").click(function(){count++;$("#count").text(count);let inputnumber = parseInt($("#number").val());if(inputnumber==guessnumber){$("#result").text('猜对了')$("#result").css("color","yellow")}else if(inputnumber>guessnumber){$("#result").text('猜大了')$("#result").css("color","red")}else{$("#result").text('猜小了')$("#result").css("color","blue")}})$("#reset").click(function(){guessnumber = Math.floor(Math.random()*100);count = 0;$("#number").val("");$("#count").text(count);$("#result").text("");})})</script>
</body>
</html>

注意要引入jQuery的依赖; 

2,表白墙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><style>* {padding: 0;margin: 0;;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p{color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>
</head>
<body><div class="container"><h1>表白墙</h1><p>输入后点击提交,会将信息显示在表格中</p><div class="row"><span>谁:</span><input type="text" class="edit"></div><div class="row"><span>对谁:</span><input type="text" class="edit"></div><div class="row"><span>说什么:</span><input type="text" class="edit"></div><div class="row"><input type="button" value="提交" class="submit"></div></div><SCript>$(function(){$(".submit").click(function(){let from = $(".edit:eq(0)").val();let to = $(".edit:eq(1)").val();let message = $(".edit:eq(2)").val();var html = '<div class="row">' + from + '对'+ to +'说' + message + '</div>';$(".container").append(html);$(":text").val("")})})</SCript>
</body>
</html>

 

相关文章:

前端小练习————表白墙+猜数字小游戏

1&#xff0c;猜数字游戏 实现一个这个样式的 要猜的目标数字 点击重新开始游戏之后&#xff1a; 代码实现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widt…...

五年级数学知识边界总结思考-上册

目录 一、背景二、过程1.小数乘法和除法小学五年级小数乘除法的知识点、由来、作用与意义解析**一、核心知识点梳理****二、知识点的由来****三、作用与意义****四、教学意义** **总结** 2.位置小学五年级“位置”知识点、由来、作用与意义解析**一、核心知识点梳理****二、知识…...

C与指针——内存操作与动态内存

1、内存常用操作 void* memcpy(void* dst,const void* src,size_t length); \\内存不允许重叠 void* memmove(void* dst,const void* src,size_t length); \\内存允许重叠 int memcmp(const void* dst,const void* src,size_t length); \\相等返回0 void* memset(void* dst,in…...

P3469 [POI 2008] BLO-Blockade

P3469 [POI 2008] BLO-Blockade 题目描述 B 城有 n n n 个城镇&#xff08;从 1 1 1 到 n n n 标号&#xff09;和 m m m 条双向道路。 每条道路连结两个不同的城镇&#xff0c;没有重复的道路&#xff0c;所有城镇连通。 把城镇看作节点&#xff0c;把道路看作边&…...

Linux网络编程 day3 五一结假

基本概念 三次握手 主动发起连接请求端&#xff0c;发送SYN标志位&#xff0c;请求建立连接。携带数据包包号、数据字节数(0)、滑动窗口大小。 被动接收连接请求端&#xff0c;发送ACK标志位&#xff0c;同时携带SYN请求标志位。携带序号、确认序号、数据包包号、数据字节数…...

解释一下NGINX的反向代理和正向代理的区别?

大家好&#xff0c;我是锋哥。今天分享关于【解释一下NGINX的反向代理和正向代理的区别?】面试题。希望对大家有帮助&#xff1b; 解释一下NGINX的反向代理和正向代理的区别? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 NGINX 作为一个高效的反向代理服务器&a…...

Coco AI 入驻 GitCode:打破数据孤岛,解锁智能协作新可能

在信息爆炸时代&#xff0c;企业正面临前所未有的挑战&#xff1a; 企业数据和信息分散&#xff0c;数据孤岛现象严重&#xff0c;员工往往浪费大量时间跨平台检索&#xff1b;跨部门协作困难&#xff0c;团队因信息隔阂导致项目延期&#xff1b;数据安全问题严峻&#xff0c;…...

【QT】QT中的网络编程(TCP 和 UDP通信)

QT中的网络编程&#xff08;TCP 和 UDP通信&#xff09; 1.tcp1.1 tcp通信1.1.1 相比linux中tcp通信:1.1.2 QT中的tcp通信: 1.2 tcp通信流程1.2.1 服务器流程&#xff1a;1.2.1.1 示例代码1.2.1.2 现象 1.2.2 客户端流程&#xff1a;1.2.2.1 示例代码1.2.2.2 现象&#xff1a; …...

个性化推荐:大数据引领电子商务精准营销新时代

个性化推荐:大数据引领电子商务精准营销新时代 引言 在电子商务的时代,个性化推荐系统已经成为提升用户体验、增强平台竞争力的重要技术。随着大数据技术的迅猛发展,传统的推荐方法已经无法满足用户日益增长的需求。为了精准地把握用户兴趣和消费倾向,商家们依赖大数据分析…...

【前端】【总复习】HTML

一、HTML&#xff08;结构&#xff09; HTML 是网页的骨架&#xff0c;主要负责网页的结构与语义表达&#xff0c;为 CSS 和 JavaScript 提供承载基础。 1.1 HTML 基本结构与语义化标签 1.1.1 HTML 基本结构 <!DOCTYPE html> <html lang"en"> <hea…...

Android 输入控件事件使用示例

一 前端 <EditTextandroid:id="@+id/editTextText2"android:layout_width="match_parent"android:layout_height="wrap_content"android:ems="10"android:inputType="text"android:text="Name" />二 后台代…...

JVM happens-before 原则有哪些?

理解Java Memory Model (JMM) 中的 happens-before 原则对于编写并发程序有很大帮助。 Happens-before 关系是 JMM 用来描述两个操作之间的内存可见性以及执行顺序的抽象概念。如果一个操作 A happens-before 另一个操作 B (记作 A hb B)&#xff0c;那么 JMM 向你保证&#x…...

Python实例题:Python获取NBA数据

目录 Python实例题 题目 方式一&#xff1a;使用网页爬虫获取数据 代码解释 get_nba_schedule 函数&#xff1a; 主程序&#xff1a; 方式二&#xff1a;使用专业 API 获取数据 代码解释 运行思路 方式一 方式二 注意事项 以下是完整的 doubaocanvas 代码块&#…...

【中间件】brpc_基础_remote_task_queue

文章目录 remote task queue1 简介2 核心功能2.1 任务提交与分发2.2 无锁或低锁设计2.3 与 bthread 深度集成2.4 流量控制与背压 3 关键实现机制3.1 数据结构3.2 任务提交接口3.3 任务窃取&#xff08;Work Stealing&#xff09;3.4 同步与唤醒 4 性能优化5 典型应用场景6 代码…...

React-router v7 第七章(导航)

导航 在React-router V7中&#xff0c;大致有四种导航方式&#xff1a; 使用Link组件 link使用NavLink组件 navlink使用编程式导航useNavigate usenavigate使用redirect重定向 redirect Link Link组件是一个用于导航到其他页面的组件&#xff0c;他会被渲染成一个<a>…...

Terraform 中的 external 数据块是什么?如何使用?

在 Terraform 中&#xff0c;external 数据块&#xff08;Data Block&#xff09; 是一种特殊的数据源&#xff0c;允许你通过调用外部程序或脚本获取动态数据&#xff0c;并将结果集成到 Terraform 配置中。它适用于需要从 Terraform 外部的系统或工具获取信息的场景。 一、e…...

打印Excel表格时单元格文字内容被下一行遮盖的解决方法

本文介绍在打印Excel表格文件时&#xff0c;单元格最后一行的文字内容被下一行单元格遮挡的解决方法。 最近&#xff0c;需要打印一个Excel表格文件。其中&#xff0c;已知对于表格中的单元格&#xff0c;都设置了自动换行&#xff0c;如下图所示。 并且&#xff0c;也都设置了…...

【Linux】命令行参数与环境变量

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;Linux 目录 前言 一、命令行参数 1. 什么是命令行参数 2. 命令行参数的作用 二、环境变量 1. 基本概念 2. 常见的环境变量 3. 环境变量相关操作 定义…...

Dify 完全指南(一):从零搭建开源大模型应用平台(Ollama/VLLM本地模型接入实战)》

文章目录 1. 相关资源2. 核心特性3. 安装与使用&#xff08;Docker Compose 部署&#xff09;3.1 部署Dify3.2 更新Dify3.3 重启Dify3.4 访问Dify 4. 接入本地模型4.1 接入 Ollama 本地模型4.1.1 步骤4.1.2 常见问题 4.2 接入 Vllm 本地模型 5. 进阶应用场景6. 总结 1. 相关资源…...

民法学学习笔记(个人向) Part.3

民法学学习笔记&#xff08;个人向&#xff09; Part.3 8. 诉讼时效&#x1f338; 概念&#xff1a; 是指权利主体在法定期间内不行使权利&#xff0c;则债务人享有抗辩权&#xff0c;可以导致权利人无法胜诉的法律制度&#xff08;有权你不用&#xff0c;别人就有话说了&#…...

C# 方法(返回值、返回语句和void方法)

本章内容: 方法的结构 方法体内部的代码执行 局部变量 局部常量 控制流 方法调用 返回值 返回语句和void方法 局部函数 参数 值参数 引用参数 引用类型作为值参数和引用参数 输出参数 参数数组 参数类型总结 方法重载 命名参数 可选参数 栈帧 递归 返回值 方法可以向调用代码返…...

打电话玩手机检测数据集VOC+YOLO格式8061张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;8061 标注数量(xml文件个数)&#xff1a;8061 标注数量(txt文件个数)&#xff1a;8061 …...

详解如何压测RocketMQ

目录 1.如何设计压测 2.压测工具 3.硬件配置 4.写代码压测 5.自带压测脚本 1.如何设计压测 二八定律法则&#xff1a;按业务峰值的 120% 设计压测目标&#xff08;若线上峰值1000TPS&#xff0c;压测目标至少1200TPS&#xff09; 关注三个指标 吞吐量&#xff08;TPS&…...

实验三 触发器及基本时序电路

1.触发器的分类&#xff1f;各自的特点是什么&#xff1f; 1 、 D 触发器 特点&#xff1a;只有一个数据输入端 D &#xff0c;在时钟脉冲的触发沿&#xff0c;输出 Q 的状态跟随输入端 D 的 状态变化&#xff0c;即 &#xff0c;功能直观&#xff0c;利于理解和感受…...

双列集合——map集合和三种遍历方式

双列集合的特点 键和值一一对应&#xff0c;每个键只能对应自己的值 一个键和值整体称为键值对或键值对对象&#xff0c;java中叫做entry对象。 map常见的api map接口中定义了双列集合所有的共性方法&#xff0c;下面三个实现类就没有什么额外新的方法要学习了。 map接口…...

WebRTC 服务器之Janus视频会议插件信令交互

1.基础知识回顾 WebRTC 服务器之Janus概述和环境搭建-CSDN博客 WebRTC 服务器之Janus架构分析-CSDN博客 2.插件使用流程 我们要使⽤janus的功能时&#xff0c;通常要执⾏以下操作&#xff1a; 1. 在你的⽹⻚引入 Janus.js 库&#xff0c;即是包含janus.js&#xff1b; <…...

LabVIEW温控系统热敏电阻滞后问题

在 LabVIEW 构建的温控系统中&#xff0c;热敏电阻因热时间常数大&#xff08;2 秒左右&#xff09;产生的滞后效应&#xff0c;致使控温出现超调与波动。在不更换传感器的前提下&#xff0c;可从算法优化、硬件调整和系统设计等维度着手解决。 ​ 一、算法优化​ 1. 改进 PI…...

【Unity】使用XLua进行热修复

准备工作&#xff1a; &#xff08;1&#xff09;将XLua的Tool拖入Asset &#xff08;2&#xff09;配置热修复 &#xff08;3&#xff09;运行Genrate Code &#xff08;4&#xff09;运行Hotfix Inject In Editor 编写脚本&#xff08;注意类上带有[Hotfix]&#xff09; [Hot…...

GateWay使用

首先创建一个网关服务&#xff0c;添加对应的依赖 <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency><dependency><groupId&…...

如何使用责任链模式优雅实现功能(滴滴司机、家政服务、请假审批等)

在企业级开发中&#xff0c;我们经常会遇到一系列有先后顺序、逐步处理的逻辑链路&#xff0c;例如请假审批、报销审批、日志处理、事件处理、滴滴司机接单流程等。这些场景非常适合使用 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 来优雅地实现。 本…...

opencv的contours

1.哪里来的contours&#xff1a; 我们常常用到这一句&#xff1a; contours, hierarchy cv2.findContours(img, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) 输出的contours的是一个tuple类型的&#xff1a; 1.它的len&#xff08;&#xff09;就是contour的个数 2.每一…...

使用 OpenCV 和 Dlib实现轮廓绘制

文章目录 引言1.准备工作2.代码解析2.1 导入必要的库2.2 定义绘制直线函数2.3 定义绘制凸包函数2.4 加载图像和模型2.5 关键点检测与绘制2.6 显示结果 3.68个关键点索引说明4.应用场景5.优化建议6. 结语 引言 人脸关键点检测是计算机视觉中的重要任务&#xff0c;广泛应用于人…...

学习黑客Linux 命令

在操作下面的闯关题之前&#xff0c;给下学习资料 一图速览&#xff1a;20 条命令及练习手册 #命令 & 常用参数关键作用典型练习1ls -alh列文件&#xff08;含隐藏 & 人类可读大小&#xff09;(数字海洋)在 $HOME 统计目录数2cd / pwd切换、显示路径cd /tmp &&a…...

探秘 RocketMQ 的 DLedgerServer:MemberState 的技术解析与深度剖析

在 RocketMQ 构建高可靠、强一致性消息系统的架构中&#xff0c;DLedgerServer 扮演着举足轻重的角色&#xff0c;而 MemberState 作为 DLedgerServer 内部用于描述节点状态的核心类&#xff0c;更是整个分布式日志模块稳定运行的关键。深入理解 MemberState 的设计理念、功能特…...

【计算机网络】HTTP中GET和POST的区别是什么?

从以下几个方面去说明&#xff1a; 1.定义 2.参数传递方式 3.安全性 4.幂等性 1.定义&#xff1a; GET&#xff1a; 获取资源&#xff0c;通常请求数据而不改变服务器的状态。POST&#xff1a; 提交数据到服务器&#xff0c;通常会改变服务器的状态或副作用(如创建或更新资源…...

C++负载均衡远程调用学习之Agent代理模块基础构建

目录 1.课程复习 2.Lars-lbAgentV0.1-udpserver启动 3.Lars-lbAgentV0.1-dns-reporter-client-thread启动 4.Lars-lbAgentV0.1-dns-client实现 5.Lars-lbAgentV0.1-dns-client编译错误修正 6.Lars-lbAgentV0.1-reporter_client实现 1.课程复习 ### 11.2 完成Lars Reactor…...

游戏开发的TypeScript(4)TypeScript 的一些内置函数

在 TypeScript 中&#xff0c;内置函数分为两类&#xff1a;JavaScript 原生函数&#xff08;TypeScript 继承&#xff09;和TypeScript 特有函数&#xff08;类型系统相关&#xff09;。以下是详细分类介绍&#xff1a; 一、JavaScript 原生函数 TypeScript 继承了所有 Java…...

软考 系统架构设计师系列知识点之杂项集萃(52)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;51&#xff09; 第82题 以下关于系统性能的叙述中&#xff0c;不正确的是&#xff08;&#xff09;。 A. 常见的Web服务器性能评估方法有基准测试、压力测试和可靠性测试 B. 评价Web服务器的主…...

大连理工大学选修课——图形学:第五章 二维变换及二维观察

第五章 二维变换及二维观察 二维变换 基本几何变换 图形的几何变换是指对图形的几何信息经过平移、比例、旋转等变换后产生新的图形。 基本几何变换都是相对于坐标原点和坐标轴进行的几何变换。 平移变换 推导&#xff1a; x ′ x T x y ′ y T y xxT_x\\ yyT_y x′xT…...

观察者模式(Observer Pattern)详解

文章目录 1. 什么是观察者模式?2. 为什么需要观察者模式?3. 观察者模式的核心概念4. 观察者模式的结构5. 观察者模式的基本实现简单的气象站示例6. 观察者模式的进阶实现推模型 vs 拉模型6.1 推模型(Push Model)6.2 拉模型(Pull Model)7. 观察者模式的复杂实现7.1 在线商…...

复刻低成本机械臂 SO-ARM100 标定篇

视频讲解&#xff1a; 复刻低成本机械臂 SO-ARM100 标定篇 组装完机械臂后&#xff0c;要进行初始标定&#xff0c;参考github的markdown lerobot/examples/10_use_so100.md at main huggingface/lerobot 只有从臂&#xff0c;所以arms里面只填follower即可 python lerobot…...

idea创建springboot工程-指定阿里云地址创建工程报错

idea创建springboot工程-指定阿里云地址创建工程报错 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是springboot的使用。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性。【帮帮志系列文章】&#xff1…...

OpenStack HA高可用集群Train版-0集群环境准备

OpenStack HA高可用集群Train版-0集群环境准备 目录 主机配置1.主机名2.网卡配置网卡UUID配置主机名解析配置免密登录防火墙相关配置时间同步配置 二、基础软件安装数据库构建数据库集群设置心跳检测clustercheck准备脚本创建心跳检测用户,(任意控制节点)检测配置文件每个控制节…...

Python3与Dubbo3.1通讯解决方案(dubbo-python)

【文章非VIP可读&#xff0c;如果发现阅读限制为系统自动修改阅读权限&#xff0c;请留言我改回】 概述 最近AI项目需要java与python通讯&#xff0c;两边都是比较新的版本。因此需要双方进行通讯&#xff0c;在这里记录一下所采用的方案和关键点。 JAVA调用Python python通…...

深入探索 Java 区块链技术:从核心原理到企业级实践

一、Java 与区块链的天然契合 1.1 区块链技术的核心特征 区块链作为一种分布式账本技术&#xff0c;其核心特征包括&#xff1a; 去中心化&#xff1a;通过 P2P 网络实现节点自治&#xff0c;消除对中央机构的依赖。不可篡改性&#xff1a;利用哈希链和共识机制确保数据一旦…...

NV214NV217美光闪存固态NV218NV225

NV214NV217美光闪存固态NV218NV225 在当今数据驱动的时代&#xff0c;固态硬盘&#xff08;SSD&#xff09;的性能直接决定了计算系统的效率上限。美光科技作为全球存储解决方案的领军者&#xff0c;其NV系列产品凭借尖端技术持续刷新行业标准。本文将围绕NV214、NV217、NV218、…...

第三方组件库:element-uiiviewVant

第三方组件库&#xff1a;element-ui 使用方法&#xff1a; 1.引入样式 <!-- 引入element-ui样式 --><link rel"stylesheet" type"text/css" href"http://unpkg.com/view-design/dist/styles/iview.css">2.引入vue <!-- 引入Vue …...

Qt实现 hello world + 内存泄漏(5)

文章目录 实现hello world的两种方式通过图形化的方式通过纯代码的方式1. 新老头文件的说明2.堆或栈上创建对象的选择3.QString的说明 内存泄漏问题 实现hello world的两种方式 通过图形化的方式 通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示出hello …...

13:图像处理—畸变矫正详解

1.制作标定板和描述文件 &#xff08;用PS软件打印&#xff09; * 0.00375 mark 点间距 &#xff0c; 不是 点的直径//倒数第二个就是描述文件 gen_caltab(7,7,0.00375,0.5,caltab_30mm.descr,30-30.ps) * 1 比 1 打印 。Photoshop 格式 2.把标定板调正 调正的目的是为了…...

Prompt compress 技术探究-LLMLingua

Prompt summary&#xff1a;是通过精心设计的提示词&#xff08;prompt&#xff09;引导大型语言模型&#xff08;如 GPT-4&#xff09;生成特定风格或结构的摘要。其目标不仅是压缩信息&#xff0c;还包括满足特定的格式要求、风格偏好或任务需求&#xff0c;所以和一般的文本…...