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 …...
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 抗噪声…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
微服务商城-商品微服务
数据表 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 商…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
