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

for循环与webAPI练习题

news 2026/2/8 19:47:27

爱太容易了，让爱维持才是最困难的部分

文章目录

          • for循环练习题
          • webAPI练习题

for循环练习题

  • 练习1：计算1-100的和

     let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)

  • 练习2：将1-100之间所有是6的倍数的数字输出到控制台

    for (let i = 1; i <= 100; i++) {if (i % 6 === 0) {console.log(i)}
}

  • 练习3：在页面中打印两行 每行中有10颗☆

    for (let i = 1; i <= 2; i++) {document.write('<br/>')for (let j = 1; j <= 10; j++) {document.write('☆')}
}

  • 练习4：在页面中打印直角三角形

    for (let i = 1; i <= 10; i++) {document.write('<br />')for (let j = 1; j <= i; j++) {document.write('♡')}
}

  • 练习5：九九乘法表

    <!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>td {border: 1px solid red;width: 80px;text-align: center;}tr:nth-child(odd) {background-color: pink;}tr:nth-child(even) {background-color: orange;}</style>
</head><body><script>document.write('<table>')for (let i = 1; i <= 9; i++) {document.write('<tr>')for (let j = 1; j <= i; j++) {document.write(`<td>${j} x ${i} = ${j * i}</td>`)}document.write('</tr>')}document.write('</table>')</script>
</body></html>
webAPI练习题

  • 练习1：图片切换

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 600px;margin: 20px auto;}.first button {margin: 0 50px;}.second img {display: block;width: 315px;height: 300px;margin: 20px 0;}</style>
</head><body><div class="main"><div class="first"><button id="prev">上一张</button><button id="next">下一张</button></div><div class="second"><img src="img/1.jpg" id="img"></div><div class="three"><div id="info"></div></div></div><script>var prev = document.getElementById('prev')var next = document.getElementById('next')var img = document.getElementById('img')var info = document.getElementById('info')var index = 0var imgArr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg']info.innerHTML = `第${imgArr.length-5}张 / 共${imgArr.length}张`prev.onclick = function () {index--if (index < 0) {index = imgArr.length - 1}img.src = imgArr[index]info.innerHTML = `第${index+1}张 / 共${imgArr.length}张`}next.onclick = function () {index++if (index > imgArr.length - 1) {index = 0}img.src = imgArr[index]info.innerHTML = `第${index+1}张 / 共${imgArr.length}张`}</script>
</body></html>

  • 练习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><style>.form {width: 600px;margin: 100px auto;}.row {width: 100%;display: flex;border-top: 1px solid #0094ff;border-bottom: 1px solid #0094ff;}.cols-1 {flex: 1;}.cols-2 {flex: 2;}.cell {border-left: 1px solid #0094ff;padding: 10px 3px;line-height: 42px;text-align: center;}.cell:last-child {border-right: 1px solid #0094ff;}.text {width: 268px;height: 30px;padding: 4px;}.btn {height: 38px;width: 200px;}</style>
</head><body><div class="form"><div class="row"><div class="cell cols-1">请输入手机号</div><div class="cell cols-2"><input type="text" class="text"></div><div class="cell cols-1"><input type="button" value="获取验证码" id="getCode" class="btn"></div></div></div></body><script>var btn = document.getElementById('getCode')btn.onclick = function () {// 禁用按钮btn.disabled = true// 定义数字var i = 5// 修改按钮内容btn.value = '验证码已发送' + i// 定时器var str = window.setInterval(function () {i--// 设置按钮内容btn.value = '验证码已发送' + iif (i === 0) {// 清除定时器window.clearInterval(str)// 修改按钮内容btn.value = '获取验证码'// 启用按钮btn.disabled = false}}, 1000)}
</script></html>

  • 练习3：事件流

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件冒泡</title>
</head><body><div><p id="parEle">我是父元素<span id="sonEle">我是子元素</span></p></div><script>var parEle = document.getElementById('parEle')var sonEle = document.getElementById('sonEle')parEle.addEventListener('click', function () {console.log('父元素冒泡')}, false)parEle.addEventListener('click', function () {console.log('父元素捕获')}, true)sonEle.addEventListener('click', function () {console.log('子元素冒泡')}, false)sonEle.addEventListener('click', function () {console.log('子元素捕获')}, true)</script>
</body></html>

相关文章：

for循环与webAPI练习题

爱太容易了&#xff0c;让爱维持才是最困难的部分 文章目录 for循环练习题webAPI练习题 for循环练习题 练习1&#xff1a;计算1-100的和 let sum 0for (let i 1; i < 100; i) {sum i}console.log(sum)练习2&#xff1a;将1-100之间所有是6的倍数的数字输出到控制台 for …...

编程日记 2024/10/17 14:59:52

FLUX | 轻松掌握FLUX.1 LoRA本地训练秘籍！

在数字艺术和创意领域&#xff0c;FLUX以其独特的虚实结合技术&#xff0c;已经成为艺术家和设计师们手中的利器。今天&#xff0c;我们激动地宣布&#xff0c;FLUX推出了一款全新的FLUX.1版本&#xff0c;它将LoRA本地训练技术完美融合&#xff0c;为用户提供了更加便捷和高效…...

编程日记 2024/10/17 14:58:49

LeetCode 每日一题 最小元素和最大元素的最小平均值

最小元素和最大元素的最小平均值 你有一个初始为空的浮点数数组 averages。另给你一个包含 n 个整数的数组 nums&#xff0c;其中 n 为偶数。 你需要重复以下步骤 n / 2 次&#xff1a; 从 nums 中移除 最小 的元素 minElement 和 最大 的元素 maxElement。 将 (minElement ma…...

编程日记 2024/10/17 14:56:45

PHP学习记录-编辑器推荐和本地环境的安装

文章目录 一&#xff0c;编辑器首推VSCode1&#xff0c;vscode2&#xff0c;PHPStorm 二&#xff0c;PHP环境搭建1&#xff0c;下载安装2&#xff0c;使用phpstudy创建站点3&#xff0c;答疑解惑 一&#xff0c;编辑器首推VSCode 1&#xff0c;vscode 对于PHP新手来说&#x…...

编程日记 2024/10/17 14:55:44

嵌套div导致子区域margin失效问题解决

嵌套div导致子区域margin失效问题解决 现象原因解决方法 现象 <div class"prev"></div> <div class"parent"><div class"child"></div><div class"child"></div> </div> <div cl…...

编程日记 2024/10/17 14:54:43

搭建app业务的服务器优势类型用途等

APP服务器的服务类型有哪些 APP服务器主要包括API服务器、数据库服务器、Web服务器等。API服务器可以提供登录、注册、查询、更新等各种API服务&#xff0c;为APP提供更方便的功能&#xff1b;数据库服务器可以存储APP数据&#xff0c;访问更快、更安全&#xff1b;Web服务器可…...

编程日记 2024/10/17 14:52:41

基于Springboot+Vue的个性化推荐影院（含源码数据库）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 这个系…...

编程日记 2024/10/17 14:50:39

SpringMVC后台控制端校验-表单验证深度分析与实战优化

前言 在实战开发中&#xff0c;数据校验也是十分重要的环节之一&#xff0c;数据校验大体分为三部分&#xff1a; 前端校验后端校验数据库校验 本文讲解如何在后端控制端进行表单校验的工作 案例实现 在进行项目开发的时候,前端(jquery-validate),后端,数据库都要进行相关的数据…...

编程日记 2024/10/17 14:49:38

Codeforces Round 770 (Div. 2)

比赛链接&#xff1a;Dashboard - Codeforces Round 770 (Div. 2) - Codeforces A. Reverse and Concatenate 题意&#xff1a; 思路&#xff1a; 假设 s "abba" 经过1次操作后 -> "abbaabba" s "abcd" 经过一次操作后 -> "abcd…...

编程日记 2024/10/17 14:48:36

ProteinMPNN中蛋白质特征提取

函数 featurize 的主要作用是将一批蛋白质序列和结构信息转化为深度学习模型可以接受的特征矩阵。它在处理蛋白质多链结构（即多个链的蛋白质复合体）时，考虑了可见链和被掩码链的区分。 代码： import torch import numpy as np import csv import time import os import r…...

编程日记 2024/10/17 14:44:33

Word中如何删除表格下一页的空白页

Reference&#xff1a; [1] Word空白页怎么都删除不掉&#xff1f;用这6个方法随便删&#xff01; - 知乎 (zhihu.com)...

编程日记 2024/10/17 14:43:29

RabbitMQ 如何保证消息不丢失？

为了保证消息在 RabbitMQ 中不丢失&#xff0c;必须从生产者、Exchange 路由、Broker 和消费者等多个方面采取有效措施。RabbitMQ 消息丢失的场景主要分为以下三种情况&#xff1a;生产者端、路由过程以及消费者端。 一、RabbitMQ 消息丢失的三种情况 在讨论如何保证消息不丢…...

编程日记 2024/10/17 14:41:28

Oracle或者PL/SQL导入pde文件

目录 pde文件使用pl/sql developer的 tools-> import tables-> pl/sql developer来导入&#xff1b;...

编程日记 2024/10/17 14:38:24

【QAMISRA】解决导入commands.json时报错问题

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决导入commands.json时报错“Could not obtain system-wide includes and defines”的问题。 2、 问题场景 客户导入commands.json时报错“Could not obtain system-wide includes and defines”。 3、软硬件环境…...

编程日记 2024/10/17 14:35:20

影刀RPA实战番外：excel函数应用指南

Excel函数是用于执行特定计算、分析和数据处理任务的预定义公式。它们可处理数学计算、文本处理、逻辑判断、日期和时间运算、查找和引用数据等。例如&#xff0c;SUM函数可以计算一系列数字的总和&#xff0c;IF函数进行逻辑测试&#xff0c;VLOOKUP函数在表格中查找数据&…...

编程日记 2024/10/17 14:34:19

php生成PDF文件（FPDF）

FPDF即“Free PDF”&#xff0c;FPDF类库提供了基本的PDF创建功能&#xff0c;其源代码和使用权是免费的。 PDF格式文档优势 通用&#xff1a;PDF文档在UNIX和Windows系统均可正常使用。 安全&#xff1a;PDF文档可设置为只读模式&#xff0c;并且可以添加密码等保护措施。 美…...

编程日记 2024/10/17 14:33:19

（接口测试）day01接口测试理论 http理论 接口测试流程 接口文档解析

一.接口测试理论 1.接口和接口测试 服务器为客户端开了一个验证接口&#xff08;接口本质&#xff1a;函数方法&#xff09;客户端向服务器传送的消息可以相当于函数的参数&#xff0c;接口是用来让客户端传递数据的 接口&#xff1a;相当于开了一个通道 当服务器要给客户端响…...

编程日记 2024/10/17 14:32:17

Telegram——Bot 机器人/小程序入门指南

一、Bot 介绍 在 TG 中，机器人可以用于接收和发送消息、管理群组（在有权限的情况下可以封禁用户、删除消息、置顶消息等）、通过API进行编程操作、使用 Inline 查询功能在不同的聊天室中提供查询服务、创建自定义键盘按钮、发出账单并收款、接入小程序游戏等。 然而，Bot 默…...

编程日记 2024/10/17 14:30:14

tauri build 后界面样式失效

其中一种情况&#xff1a;你为了使用 convertFileSrc 来加载本地资源&#xff0c;按照官方文档在 tauri.conf.json 中 设置了 tauri.security.csp 为 "default-src self; img-src self asset: https://asset. Localhost"&#xff0c;恰好你在组件中编写了一部分的内联…...

编程日记 2024/10/17 14:29:13

打印自然常数E

自然常数E 自然常数&#xff0c;符号e&#xff0c;为数学中一个常数&#xff0c;是一个无限不循环小数&#xff0c;且为超越数&#xff0c;其值约为2.718281828459045。它是自然对数函数的底数。 我们打印表达式(11/x)的x次方的值以及获取第一次大于2.718的正整数 新建C#控制…...

编程日记 2024/10/17 14:27:11

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/8 15:03:04

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51