JavaScript极速入门-综合案例(3)
综合案例
猜数字
预期效果
代码实现
<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…...
RabbitMQ架构详解
文章目录 概述架构详解核心组件虚拟主机（Virtual Host）RabbitMQ 有几种广播类型 概述 RabbitMQ是⼀个高可用的消息中间件，支持多种协议和集群扩展。并且支持消息持久化和镜像队列，适用于对消息可靠性较高的场合 官网https://www.…...
编译内核错误 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…...
深度学习模型部署(四)常用模型及推理平台评估指标
判断选择什么模型，什么量化方案，什么推理框架，最基础的知识就是如何评估自己的模型以及推理平台。 模型衡量标准 衡量一个模型的最直接标准就是运算速度，但是运算速度是无法计算的，所以定义了一些间接标准来推测模型的…...
【控制台警告】npm WARN EBADENGINE Unsupported engine
今天用webpack下载几个loader依赖，爆出了三个警告，大概的意思就是本地安装的node和npm的版本不是很匹配？ 我的解决思路是： 先检查node和npm版本 然后去官网查找版本的对应 靠，官网404 Node.js (nodejs.org) 就找到…...
ArmSoM Rockchip系列产品 通用教程 之 GPIO 使用
1. GPIO简介 GPIO，全称 General-Purpose Input/Output（通用输入输出），是一种在计算机和嵌入式系统中常见的数字输入输出接口。它允许软件控制硬件的数字输入和输出，例如开关、传感器、LED灯等。GPIO通常由一个芯片或…...
npm镜像源地址
镜像源地址替换问题（重要） 2024 年 1 月 22 日 ，registry.npm.taobao.org 的 SSL 证书正式过期。 2022 年 5 月 淘宝源发布了公告： （大家应该没有太多关注哦，也包括我，哈哈） &am…...
Java的Writer类详解
咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE相关知识点了，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好…...
R语言基础的代码语法解译笔记
1、双冒号，即：“::” 要使用某个包里的函数，通常做法是先加载（library）包，再调用函数。最新加载的包的namespace会成为最新的enviroment，某些情况下可能影响函数的结果。而package name::funct…...
【蓝桥杯】蓝桥杯算法复习（一）
😀大家好，我是白晨，一个不是很能熬夜😫，但是也想日更的人✈。如果喜欢这篇文章，点个赞👍，关注一下👀白晨吧！你的支持就是我最大的动力！Ǵ…...
移动端精准测试简介
在测试领域每隔一段时间，就会有一些主流的测试技术，比如说：接口自动化，WebUI, AppUI自动化，然后就是测试平台的开发，各类专项测试（性能，安全）,再到前几年的手机集群云测平…...
CCProxy代理服务器地址的设置步骤
目录 前言 一、下载和安装CCProxy 二、启动CCProxy并设置代理服务器地址 三、验证代理服务器设置是否生效 四、使用CCProxy进行代理设置的代码示例 总结 前言 CCProxy是一款常用的代理服务器软件，可以帮助用户实现网络共享和上网代理。本文将详细介绍CCProxy…...
探秘分布式神器RMI：原理、应用与前景分析（二）
本系列文章简介： 本系列文章将深入探究RMI远程调用的原理、应用及未来的发展趋势。首先，我们会详细介绍RMI的工作原理和基本流程，解析其在分布式系统中的核心技术。随后，我们将探讨RMI在各个领域的应用，包括分布式计算…...
[项目设计] 从零实现的高并发内存池(三)
🌈 博客个人主页：Chris在Coding 🎥 本文所属专栏：[高并发内存池] ❤️ 前置学习专栏：[Linux学习] ⏰ 我们仍在旅途 目录 4.CentralCache实现 4.1 CentralCache整体架构 4.2 围绕Span的相关设计…...
将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…...
el-table-column嵌套el-form-item不能进行校验问题解决
项目为vue3elementPlus开发的项目 业务要求：table表格展示数据，其中有一行是ip地址可展示可修改，此处要求增加自定义校验规则 先看一下效果： 此处先描述一下，问题出在了哪里，我将el-table的data,使用一个…...
leetcode200. 岛屿数量
leetcode200. 岛屿数量 题目 思路 遍历每一个网格，若网格为1，岛屿数量1，利用一个深度优先搜索函数将岛屿置零，注意判断数组边界 代码 class Solution:def numIslands(self, grid: List[List[str]]) -> int:self.grid grid…...
MySQL--索引类型详解
索引的类型 主键索引： PRIMARY KEY，当一张表的某个列是主键的时候，该列就是主键索引，一张表只允许有一个主键索引，主键所在的列不能为空。 创建主键索引的SQL语法： # 给user表中的id字段创建名为id_ind…...
R语言中ggplot2图例位置、颜色、背景、标题
目录 1、不显示图例 2、自定义图例位置 3、修改图例背景颜色、外框颜色、大小 4、修改图例大小 5、图例设置背景、线框为空 6、自定义设置多个图例的标题 7、设置多个图例的之间的间隔 8、取消不需要的图例显示 1、不显示图例 theme(legend.position "none"…...
波卡 Alpha 计划启动，呼唤先锋创新者重新定义 Web3 开发
原文：https://polkadot.network/blog/the-polkadot-alpha-program-a-new-era-for-decentralized-building-collaboration/ 编译：OneBlock 区块链领域不断发展，随之而来的是发展和创新机会的增加。而最新里程碑是令人振奋的 Polkadot Alpha …...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
return this；返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
Vue ③-生命周期 || 脚手架
生命周期 思考：什么时候可以发送初始化渲染请求？（越早越好） 什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期： 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...