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

for循环与webAPI练习题

news 2025/12/27 18:45:46

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

文章目录

          • 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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/12/19 22:35:03

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/12/16 10:41:42

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/12/15 11:10:54

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/12/24 20:35:24

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/11/22 6:37:27