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

JavaScript极速入门-综合案例(3)

news 2026/2/10 21:00:09

综合案例

猜数字

预期效果

代码实现

    <button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字:<input type="text" id="number"><button type="button" id="button">猜</button><br>已经猜的次数:<span id="count">0</span><br>结果:<span id="result"></span><script>$(function(){//先随机生成一个1-100的数字var guessNumber = Math.floor(Math.random() * 100) + 1; //Math.random()会生成1-100的数字var count = 0;//click:点击//事件驱动:只有真正发生了点击事件时,才会执行该函数$("#button").click(function() {count++;$("#count").text(count);var userGuess = parseInt($("#number").val());if(userGuess == guessNumber) {$("#result").text("猜对了");$("#result").css("color", "green");} else if(userGuess < guessNumber) {$("#result").text("猜小了");$("#result").css("color", "red");} else {$("#result").text("猜大了");$("#result").css("color", "red");}$("#number").val("");});$("#reset").click(function(){guessNumber = Math.floor(Math.random() * 100) + 1;count = 0;$("#count").text(count);$("#result").text("");$("#number").val("");});});</script>

表白墙

预期效果

需求:按要求在文本框中输入内容,点击提交按钮,输入内容显示在页面下方.

代码实现

1.提前准备如下HTML和CSS代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 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 class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>
</body></html>

2.实现提交

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><script>$(function () {// 给点击按钮注册点击事件$(".submit").click(function () {// 1. 获取到编辑框内容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val();console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}// 2. 构造 html 元素var html = '<div class="row">' + from + '对' + to + '说: ' + message + '<div class="row">';// 3. 把构造好的元素添加进去$('.container').append(html);// 4. 同时清理之前输⼊框的内容$(":text").val("");});});</script>

总结

1.HTML是一种超文本标记语言,主要用于页面内容的显示和排版.如果需要更漂亮的样式展示和页面效果,需要搭配CSS和JavaScript来使用

2.学习HTML主要是学习标签,HTML标签特别多,了解基本语法即可

3.CSS重点是学习CSS选择器的使用

4.JavaScript是一个脚本语言,与Java没有关系.JQuery是一个JavaScript框架,使用JQuery可以轻松地选择和操作HTML元素,提高我们的开发效率.

5.前端开发对于后端开发人员而言不是很重要,不必花费过多时间在这个上面.达到借助网络能阅读代码的水平即可

JavaScript极速入门-综合案例(3)

综合案例猜数字预期效果代码实现 <button type"button" id"reset">重新开始一局游戏</button><br>请输入要猜的数字:<input type"text" id"number"><button type"button" id"button&q…...

编程日记 2024/3/9 12:31:15

RabbitMQ架构详解

文章目录概述架构详解核心组件虚拟主机（Virtual Host）RabbitMQ 有几种广播类型概述 RabbitMQ是⼀个高可用的消息中间件，支持多种协议和集群扩展。并且支持消息持久化和镜像队列，适用于对消息可靠性较高的场合官网https://www.…...

编程日记 2024/3/9 12:30:14

编译内核错误 multiple definition of `yylloc‘

编译内核错误 # make ARCHarm CROSS_COMPILEarm-mix410-linux- uImageHOSTLD scripts/dtc/dtc /usr/bin/ld: scripts/dtc/dtc-parser.tab.o:(.bss0x10): multiple definition of yylloc; scripts/dtc/dtc-lexer.lex.o:(.bss0x0): first defined here collect2: error: ld ret…...

编程日记 2024/3/9 12:29:13

深度学习模型部署(四)常用模型及推理平台评估指标

判断选择什么模型，什么量化方案，什么推理框架，最基础的知识就是如何评估自己的模型以及推理平台。模型衡量标准衡量一个模型的最直接标准就是运算速度，但是运算速度是无法计算的，所以定义了一些间接标准来推测模型的…...

编程日记 2024/3/9 12:28:12

【控制台警告】npm WARN EBADENGINE Unsupported engine

今天用webpack下载几个loader依赖，爆出了三个警告，大概的意思就是本地安装的node和npm的版本不是很匹配？ 我的解决思路是： 先检查node和npm版本然后去官网查找版本的对应靠，官网404 Node.js (nodejs.org) 就找到…...

编程日记 2024/3/9 12:27:12

ArmSoM Rockchip系列产品通用教程之 GPIO 使用

1. GPIO简介 GPIO，全称 General-Purpose Input/Output（通用输入输出），是一种在计算机和嵌入式系统中常见的数字输入输出接口。它允许软件控制硬件的数字输入和输出，例如开关、传感器、LED灯等。GPIO通常由一个芯片或…...

编程日记 2024/3/9 12:24:08

npm镜像源地址

镜像源地址替换问题（重要） 2024 年 1 月 22 日 ，registry.npm.taobao.org 的 SSL 证书正式过期。 2022 年 5 月淘宝源发布了公告： （大家应该没有太多关注哦，也包括我，哈哈） &am…...

编程日记 2024/3/9 12:23:07

Java的Writer类详解

咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE相关知识点了，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好…...

编程日记 2024/3/9 12:22:06

R语言基础的代码语法解译笔记

1、双冒号，即：“::” 要使用某个包里的函数，通常做法是先加载（library）包，再调用函数。最新加载的包的namespace会成为最新的enviroment，某些情况下可能影响函数的结果。而package name::funct…...

编程日记 2024/3/9 12:21:05

【蓝桥杯】蓝桥杯算法复习（一）

😀大家好，我是白晨，一个不是很能熬夜😫，但是也想日更的人✈。如果喜欢这篇文章，点个赞👍，关注一下👀白晨吧！你的支持就是我最大的动力！&#x1f4…...

编程日记 2024/3/9 12:19:04

移动端精准测试简介

在测试领域每隔一段时间，就会有一些主流的测试技术，比如说：接口自动化，WebUI, AppUI自动化，然后就是测试平台的开发，各类专项测试（性能，安全）,再到前几年的手机集群云测平…...

编程日记 2024/3/9 12:18:02

CCProxy代理服务器地址的设置步骤

目录前言一、下载和安装CCProxy 二、启动CCProxy并设置代理服务器地址三、验证代理服务器设置是否生效四、使用CCProxy进行代理设置的代码示例总结前言 CCProxy是一款常用的代理服务器软件，可以帮助用户实现网络共享和上网代理。本文将详细介绍CCProxy…...

编程日记 2024/3/9 12:16:01

探秘分布式神器RMI：原理、应用与前景分析（二）

本系列文章简介： 本系列文章将深入探究RMI远程调用的原理、应用及未来的发展趋势。首先，我们会详细介绍RMI的工作原理和基本流程，解析其在分布式系统中的核心技术。随后，我们将探讨RMI在各个领域的应用，包括分布式计算…...

编程日记 2024/3/9 12:13:59

[项目设计] 从零实现的高并发内存池(三)

🌈 博客个人主页：Chris在Coding 🎥 本文所属专栏：[高并发内存池] ❤️ 前置学习专栏：[Linux学习] ⏰ 我们仍在旅途目录 4.CentralCache实现 4.1 CentralCache整体架构 4.2 围绕Span的相关设计…...

编程日记 2024/3/9 12:09:55

将Q算法和D算法结合应用到llm解码上之人在回路

将Q算法和D算法结合应用到llm解码上之人在回路参考地址代码解释参考地址 https://dongfangyou.blog.csdn.net/article/details/136466609 代码 import numpy as np from tqdm import tqdmfrom sample import net, char2id_dict, get_real_p# 假设的词汇表 VOCABULARY lis…...

编程日记 2024/3/9 12:07:53

el-table-column嵌套el-form-item不能进行校验问题解决

项目为vue3elementPlus开发的项目业务要求：table表格展示数据，其中有一行是ip地址可展示可修改，此处要求增加自定义校验规则先看一下效果： 此处先描述一下，问题出在了哪里，我将el-table的data,使用一个…...

编程日记 2024/3/9 12:06:53

leetcode200. 岛屿数量

leetcode200. 岛屿数量题目思路遍历每一个网格，若网格为1，岛屿数量1，利用一个深度优先搜索函数将岛屿置零，注意判断数组边界代码 class Solution:def numIslands(self, grid: List[List[str]]) -> int:self.grid grid…...

编程日记 2024/3/9 12:03:50

MySQL--索引类型详解

索引的类型主键索引： PRIMARY KEY，当一张表的某个列是主键的时候，该列就是主键索引，一张表只允许有一个主键索引，主键所在的列不能为空。创建主键索引的SQL语法： # 给user表中的id字段创建名为id_ind…...

编程日记 2024/3/9 12:00:47

R语言中ggplot2图例位置、颜色、背景、标题

目录 1、不显示图例 2、自定义图例位置 3、修改图例背景颜色、外框颜色、大小 4、修改图例大小 5、图例设置背景、线框为空 6、自定义设置多个图例的标题 7、设置多个图例的之间的间隔 8、取消不需要的图例显示 1、不显示图例 theme(legend.position "none"…...

编程日记 2024/3/9 11:59:46

波卡 Alpha 计划启动，呼唤先锋创新者重新定义 Web3 开发

原文：https://polkadot.network/blog/the-polkadot-alpha-program-a-new-era-for-decentralized-building-collaboration/ 编译：OneBlock 区块链领域不断发展，随之而来的是发展和创新机会的增加。而最新里程碑是令人振奋的 Polkadot Alpha …...

编程日记 2024/3/9 11:56:42

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

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

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/10/7 4:57:55

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...

编程新知 2026/2/6 1:00:25

ip子接口配置及删除

配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25