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

for循环与webAPI练习题

news 文章来源：https://blog.csdn.net/chaosweet/article/details/142979479 2025/5/15 21:23:01

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

文章目录

          • 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

澳鹏干货 | 大语言模型的上下文窗口 (Context Windows)

大语言模型&#xff08;LLMs&#xff09;极大地提升了人工智能在理解和生成文本方面的能力。其中一个影响其效用的重要方面是“上下文窗口”&#xff08;Context Windows&#xff09;—— 这个概念直接影响着模型接收和生成语言的有效性。 本期澳鹏干货将深入探讨上下文窗口对…...

编程日记 2024/10/17 14:25:08

为什么k8s不支持docker-kubernetes

为什么Kubernetes不再支持Docker&#xff1f; 在Kubernetes 1.20版本之后&#xff0c;Kubernetes宣布逐步停止对Docker作为容器运行时的支持。这一改变在容器管理领域引起了广泛关注。许多人不禁疑惑&#xff1a;Kubernetes与Docker一向密切合作&#xff0c;为何会做出这样的决…...

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

数据结构编程实践20讲(Python版)—17散列

本文目录 17 散列（Hashing）S1 说明特点应用领域S2 示例：字符串哈希S2 示例：文件、图片哈希S3 应用1：食品安全追溯S4 应用2：在线内容版权保护S5 应用3：社交媒体内容审核往期链接 01 数组02 链表03 栈04 队列05 二叉树06 二叉搜索树07 AVL树08 红黑树09 B树10 B+树11 线段…...

编程日记 2024/10/17 14:21:03

看了大厂用AI审简历，我才发现社会的残酷真相！今年的秋招太可怕了

太可怕了&#xff01;今年秋招&#xff0c;大厂竟然引进黑科技—— AI 面试、AI 智能分析简历&#xff0c; 这让打工人以后咋敢写精通 Office 三件套&#xff0c;就怕被 AI 一眼识破 劝你现在掌握 AI 技能&#xff0c;真的不是说说而已&#xff01; 微软的最新职场 AI 统计数…...

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

京东大模型革命电商搜推技术：挑战、实践与未来趋势

大模型对搜推技术产生了深远的影响&#xff0c;极大地推动了搜推技术的演进趋势&#xff0c;使得搜推更加的智能化和个性化&#xff0c;然而在搜推中引入大模型时同样面临一系列的挑战&#xff0c;例如商品知识的幻觉&#xff0c;复杂查询的理解&#xff0c;个性化商品推荐&…...

编程日记 2024/10/17 14:18:00

深入学习二叉树（BinaryTree）（纯小白进）

目录&#xff1a; 一、 前言二、 正文2.1、 树的概念2.1.1、 树的结构2.1.2、 树的小知识 2.2、 认识二叉树2.2.1、 二叉树的概念2.2.2、 特殊的二叉树 2.3、 实现二叉树2.3.1、 结构2.3.2、 节点数2.3.3、 树深度2.3.4、 前、中、后序遍历 销毁2.3.4.1、 前序遍历2.3.4.2、 中…...

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

诗风秦韵诗词学习画廊宣言

诗风秦韵诗词学习画廊宣言 弘扬传统传承文明&#xff0c;奋斗路上不断前进&#xff0c;青春不朽梦想扬帆&#xff0c;华夏赞歌我心飞扬...

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

Cannot determine local hostname

1. 问题与解答 报错&#xff1a; o.s.cloud.commons.util.InetUtils : Cannot determine local hostname 可能原因&#xff1a; 缺少一个logback.xml 2. logback日志文件介绍 2.1 logback结构与组成 logback.xml 文件是 Logback 的核心配置文件&#xff0c;其基本…...

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

电工课堂-对晶闸管移相控制触发要求

晶闸管移相控制触发的要求主要包括触发信号的同步性、移相范围、输出功率、触发脉冲的参数和形式等。 触发信号的同步性&#xff1a;触发信号必须与主电路的电源频率保持一致&#xff0c;并具有固定的相位关系。这是为了确保在每个周期内晶闸管都能在相同的相位上被触发&#x…...

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

基于Arduino做的“鱿鱼游戏”BOSS面具，支持动作检测

这是一个结合了3D打印、舵机、PIR传感器和DFPlayer MP3模块的DIY项目&#xff0c;旨在制作一个带有动画眼睛的"鱿鱼游戏"老板面具。当检测到动作时&#xff0c;面具的眼睛会移动并播放声音&#xff0c;非常适合万圣节使用。 这个项目是一个很好的起点&#xff0c;特…...

编程日记 2024/10/17 14:08:51