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

for循环与webAPI练习题

news 2025/7/9 0:56:09

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

文章目录

          • 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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/7/8 4:42:35

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/7 9:01:16

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/8 9:59:33

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/7/7 18:23:46

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/7/8 16:56:08

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/7/8 1:12:18

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/6/24 6:43:34

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/7/8 16:00:54

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/7/6 10:04:23