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

黑马前端——days14_js

news 2026/3/27 9:12:22

案例 1

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style1.css">
</head><body><script src="index1.js"></script>
</body></html>

案例1

格式文件

span {/* 需要給span指定内外边距 */display: inline-block;width: 80px;height: 30px;text-align: center;line-height: 30px;padding: 5px 10px;margin: 2px;border: 1px solid #000;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);color: hotpink;background-color: rgba(255, 192, 203, 0.1);
}

事件文件

for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j} * ${i} = ${i * j}</span>`)}document.write(`<br>`)
}

案例 2

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style2.css">
</head><body><script src="index2.js"></script>
</body></html>

案例2

格式文件

* {margin: 0;padding: 0;
}.box {/* 弹性盒子布局 */display: flex;width: 700px;height: 300px;border-left: 1px solid #000;border-bottom: 1px solid #000;margin: 50px auto;text-align: center;/* 均匀排列每个元素 每个元素周围分配相同的空间 */justify-content: space-around;/* 将元素与 flex 容器的主轴末端或交叉轴末端对齐 */align-items: flex-end;
}.box>div {/* 弹性盒子布局 */display: flex;width: 50px;background-color: greenyellow;/* 定义主轴和方向 */flex-direction: column;/* 均匀排列每个元素 首个元素放置于起点 末尾元素放置于终点 */justify-content: space-between;
}.box div span {/* 默认文字在边框顶端 将文字移出去 */margin-top: -20px;
}.box div h4 {width: 70px;/* 默认文字在边框底部 将文字移出去并居中 */margin-bottom: -35px;margin-left: -10px;
}

事件文件

let arr = []
for (let i = 1; i <= 4; i++) {arr.push(prompt(`请输入第${i}季度的数据`))
}
document.write(`<div class="box">`)
for (let i = 0; i < 4; i++) {document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div>`)
}
document.write(`</div>`)

相关文章：

黑马前端——days14_js

案例 1 页面框架文件 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>&l…...

编程日记 2024/8/17 22:37:33

【自动驾驶】ROS中参数服务器通信（c++）

目录 通信过程新建参数服务器包编写测试文件修改cmakelist:搭配launch文件启动测试及结果 通信过程 1.Talker 设置参数 Talker 通过 RPC 向参数服务器发送参数(包括参数名与参数值)&#xff0c;ROS Master 将参数保存到参数列表中。 2.Listener 获取参数 Listener 通过 RPC 向…...

编程日记 2024/8/17 22:35:31

零基础5分钟上手亚马逊云科技核心云开发知识 - 网络基础

简介&#xff1a; 欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列&#xff0c;适用于任何无云计算或者亚马逊云科技技术背景的开发者&#xff0c;通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。 我会每天介绍一个基于亚马逊云科技…...

编程日记 2024/8/17 22:34:30

Unity Recttransform操作

1、拉伸铺满 RectTransform rect GetComponent<RectTransform>();rect.anchorMin Vector2.zero;rect.anchorMax Vector2.one;rect.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, Screen.width);rect.SetSizeWithCurrentAnchors(RectTransform.Axis.Verti…...

编程日记 2024/8/17 22:32:27

MIT线性代数P5

置换矩阵 置换矩阵是行重新排列的单位矩阵。 置换矩阵用P表示&#xff0c; 性质&#xff1a; n阶置换矩阵共有n!个...

编程日记 2024/8/17 22:30:24

patroni+etcd开启SSL认证（三个节点证书一致 使用openssl命令）

瀚高数据库 目录 环境 文档用途 详细信息 环境 系统平台&#xff1a;Linux x86-64 Red Hat Enterprise Linux 7 版本&#xff1a;14 文档用途 本文主要介绍Patroni架构中如何开启etcd的ssl证书认证。 详细信息 一、前提说明 patroni版本&#xff1a;3.0.2 etcd版本&#x…...

编程日记 2024/8/17 22:29:23

Eureka入门指南：微服务注册与发现的基础概念

Eureka入门指南&#xff1a;微服务注册与发现的基础概念 引言 随着微服务架构的普及&#xff0c;微服务之间的高效通信和管理成为了开发和运维的核心挑战之一。为了解决服务发现和管理问题&#xff0c;Netflix推出了Eureka&#xff0c;一个功能强大的服务注册和发现工具。Eur…...

编程日记 2024/8/17 22:24:17

Linux：动态库和静态库

静态库与动态库 A&#xff1a;静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时候把库的代码链接到可执行文件中。程序运行的时候将不再需要静态库。 B&#xff1a;动态库&#xff08;.so&#xff09;&#xff1a;程序在运行的时候才去链接动态库的代码&#…...

编程日记 2024/8/17 22:20:12

8.13网络编程

笔记 多点通信 一、套接字属性 套接字属性的获取和设置 #include <sys/types.h> /* See NOTES */#include <sys/socket.h>int getsockopt(int sockfd, int level, int optname,void *optval, socklen_t *optlen);int setsockopt(int sockfd, int level…...

编程日记 2024/8/17 22:19:11

蚂蚁AL1 15.6T 创新科技的新典范

● 哈希率&#xff1a;算力达到15.6T&#xff08;相当于15600G&#xff09;&#xff0c;即每秒能够进行15.6万亿次哈希计算&#xff0c;在同类产品中算力较为出色&#xff0c;能提高WA掘效率。 ● 功耗&#xff1a;功耗为3510W&#xff0c;虽然数值看似不低&#xff0c;但结合其…...

编程日记 2024/8/17 22:18:10

2024年【汽车驾驶员（技师）】考试报名及汽车驾驶员（技师）试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;技师&#xff09;考试报名参考答案及汽车驾驶员&#xff08;技师&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及汽车驾驶员&#xff08;技师&#xff09;操作证已考过的学员汇总…...

编程日记 2024/8/17 22:16:08

2024年【甘肃省安全员C证】报名考试及甘肃省安全员C证考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 甘肃省安全员C证报名考试参考答案及甘肃省安全员C证考试试题解析是安全生产模拟考试一点通题库老师及甘肃省安全员C证操作证已考过的学员汇总&#xff0c;相对有效帮助甘肃省安全员C证考试总结学员顺利通过考试。 1、…...

编程日记 2024/8/17 22:15:07

RabbitMQ 双机系统偶尔丢失消息问题排查

实话说起来&#xff0c;这个问题&#xff0c;实际是一个非常低级的错误导致的&#xff0c;算不得什么高深的技术问题。但是在排查的过程中&#xff0c;却是费了好大的功夫&#xff0c;死了不少脑细胞。所以也值得记录一下&#xff0c;算作给大家提个醒&#xff0c;或许可以帮大…...

编程日记 2024/8/17 22:13:05

Python 环境搭建指南 超详细

Python是由荷兰⼈吉多范罗苏姆&#xff08;Guido von Rossum&#xff0c;后⾯都称呼他为Guido&#xff09;发明的⼀种编程语言 1. 1989年圣诞节&#xff1a;Guido开始写Python语⾔的编译器。2. 1991年2⽉&#xff1a;第⼀个Python解释器诞⽣&#xff0c;它是⽤C语⾔实现的&…...

编程日记 2024/8/17 22:11:02

使用三菱PLC源码进行PLC读取写入操作

安装 MX Component 。 我的安装地址在&#xff1a; 打开 utl 文件夹下的 Communication Settings Utility 执行。 配置PLC 添加当前需要配置的PLC 注意 logical station Namber 就是程序里需要对接的逻辑站点编号 5.配置选择对应的COM操作选择对应的cpu型型号&#xff0c;…...

编程日记 2024/8/17 22:09:00

使用Nvm切换nodeJs高版本之后，使用npm install一闪而过

先说现象，最近又有几个项目接手，其中有一个使用NVM切换至高版本node后，出现如下症状； 没有任何提示，然后翻看文件目录，node_modules目录没有创建，同时在全局 npm config set prefix 设置的目录下 多了一个 pgn的快捷，指向项目目录。 使用百度或者chart-gtp,搜索到的答案…...

编程日记 2024/8/17 22:06:33

【Kubernetes】k8s集群安全机制

目录 一.认证 1.k8s集群内的三种认证方式 2.k8s集群内的认证说明 2.1.需要被认证的访问类型 2.2.安全性说明 2.3.证书颁发的方式 2.4.kubeconfig 2.5.Service Account 2.6.Secret 与 SA 的关系 二.鉴权 1.鉴权的方式 2.RBAC的角色与角色绑定 2.1.RBAC的角色 2.2…...

编程日记 2024/8/17 22:03:20

嵌入式学习---DAY24：进程--二

一、exec函数族----启动一个新程序 用fork创建子进程后执行的是和父进程相同的程序&#xff08;但有可能执行不同的代码分支&#xff09;&#xff0c; 子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时&#xff0c;该进程的 用户空间代码和数据完全被…...

编程日记 2024/8/17 22:02:19

Diffusion Model相关论文解析之(二)DENOISING DIFFUSION IMPLICIT MODELS

目录 1、摘要2、创新点3、主要公式4、自己的理解&#xff0c;对错不确定 1、摘要 ‌Denoising Diffusion Implicit Models (DDIM)‌是一种扩散模型的改进版本&#xff0c;旨在加速采样过程并提高采样速度。DDIM通过引入非马尔可夫扩散过程&#xff0c;相对于传统的去噪扩散概率…...

编程日记 2024/8/17 22:01:18

【STM32嵌入式系统设计与开发拓展】——14_定时器之输入捕获

参考哔站&#xff1a;链接: 铁头山羊 一、微控制器的高级定时与控制功能集合 1、时基单元 2、输入捕获 3、输出比较 4、从模式控制器 5、高级定时器的输出控制 二、问题集合 1、什么是定时器 定时器是一种专门负责定时功能的片上外设GPI0AFI0EXTIUSART RCC I2C) 2、定时器…...

编程日记 2024/8/17 21:58:14

PasteMD真实案例分享：从零散笔记到结构化学习计划的全过程

PasteMD真实案例分享&#xff1a;从零散笔记到结构化学习计划的全过程 1. 引言&#xff1a;当杂乱笔记遇上智能格式化 你是否经历过这样的困境&#xff1f;电脑桌面上散落着十几个临时创建的记事本文件&#xff0c;手机备忘录里堆满了未经整理的零散想法&#xff0c;会议录音…...

编程新知 2026/3/27 8:06:27

第4章 编码规范-4.2 注释规范

注释规范包括文件注释、文档注释、代码注释和TODO注释。这里需要强调一点&#xff0c;即在程序代码中&#xff0c;对容易引起误解的代码进行注释是必要的&#xff0c;但应避免对已经清晰表达信息的代码进行再次注释&#xff0c;因为频繁的注释有时恰恰反映了代码的低质量&#…...

编程新知 2026/3/27 7:34:14

CentOS7快速部署Golang 1.22.2开发环境全攻略

1. 为什么选择CentOS7部署Golang 1.22.2 最近在帮团队搭建新的开发环境时&#xff0c;我发现很多同事还在用老旧的Golang版本。作为目前最稳定的Linux发行版之一&#xff0c;CentOS7依然是企业级开发环境的首选。而Golang 1.22.2作为2024年发布的最新稳定版&#xff0c;带来了不…...

编程新知 2026/3/27 6:29:16

DeepSeek-OCR-2实战教程：OCR结果JSON Schema解析与结构化数据入库指南

DeepSeek-OCR-2实战教程&#xff1a;OCR结果JSON Schema解析与结构化数据入库指南 1. 项目简介 DeepSeek-OCR-2是基于深度学习的智能文档解析工具&#xff0c;专门针对结构化文档内容提取而设计。与传统的OCR工具只能提取纯文本不同&#xff0c;这个工具能够精准识别文档的排…...

编程新知 2026/3/27 6:23:06

Qwen3.5-4B-Claude-Opus推理模型实战：系统提示词工程最佳实践

Qwen3.5-4B-Claude-Opus推理模型实战&#xff1a;系统提示词工程最佳实践 1. 模型概述与核心能力 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。这个版…...

编程新知 2026/3/27 6:11:02

美胸-年美-造相Z-Turbo真实案例：快速生成24套手游服装方案

美胸-年美-造相Z-Turbo真实案例&#xff1a;快速生成24套手游服装方案 1. 项目背景与挑战 在手游《幻境物语》的角色设计阶段&#xff0c;美术团队面临一个紧迫需求&#xff1a;为游戏中的"花语使者"职业设计24套不同风格的服装方案。传统手工绘制方案需要至少3周时…...

编程新知 2026/3/27 6:03:01

YOLOv5实战：如何用Inner-IoU提升小目标检测效果（附完整代码）

YOLOv5实战&#xff1a;用Inner-IoU解决小目标检测痛点的工程指南 无人机镜头下的蚂蚁、CT扫描中的微小结节、卫星图像里的车辆——当目标尺寸小于3232像素时&#xff0c;传统检测器的性能往往会断崖式下跌。我们团队在医疗影像分析项目中就曾遇到这样的困境&#xff1a;常规Io…...

编程新知 2026/3/27 5:55:00

JPEXS Free Flash Decompiler社区大使选拔流程：申请与评审完全指南

JPEXS Free Flash Decompiler社区大使选拔流程&#xff1a;申请与评审完全指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款功能强大的Flash反编译…...

编程新知 2026/3/27 5:40:55

SecGPT-14B部署教程：模型热更新机制设计，不中断服务切换安全知识版本

SecGPT-14B部署教程&#xff1a;模型热更新机制设计&#xff0c;不中断服务切换安全知识版本 1. SecGPT-14B简介 SecGPT是由云起无垠推出的开源大语言模型&#xff0c;专门针对网络安全领域设计。这个模型融合了自然语言理解、代码生成和安全知识推理等核心能力&#xff0c;能…...

编程新知 2026/3/27 4:58:22

从逻辑门到CPU：计算机工作原理详解

戏说CPU的工作原理&#xff1a;从逻辑门到计算系统1. 计算系统的基本构建单元1.1 逻辑门的物理实现计算系统最基本的构建单元是逻辑门&#xff0c;它们可以通过简单的物理实体来演示。以三名士兵为例&#xff0c;我们可以构建最基本的逻辑运算单元&#xff1a;输入单元&#xf…...

编程新知 2026/3/27 4:03:39