c1见习工程师任务4--程序逻辑与算法

一、生成图片广告

1.一张图片

在这里插入图片描述
在这里插入图片描述
根据任务提示,这里使用了js使得图片位于浏览器的正中。

实现思路水平居中可以用margin实现,图片设置为固定大小,
图片盒子距离外部容器 上距离= (外部容器高度-图片高度)/2

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.多张图片-并动态设置间距

在这里插入图片描述
实现思路

首先图片肯定是需要浮动,使用DOM获得图片的个数,然后根据比例将宽度等比例划分可得到间距大小和图片长度,然后根据图片比例得到图片高度。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.多张图片轮换显示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、程序逻辑训练

1.分支

if

在这里插入图片描述

switch case

在这里插入图片描述

2.循环

for

在这里插入图片描述
执行顺序是 1 2 3 4 2 2 3 2 3 4 。。。。当2不满足时会退出循环

while

在这里插入图片描述

do while

在这里插入图片描述
先执行一次代码逻辑再进行判断。
12121212…2不满足时不执行1

3.递归

在这里插入图片描述

在这里插入图片描述

三、拓展任务—多级联动菜单

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
实现思路:

首先页面必须有几个下拉框。下拉菜单数据存储在js文件内,页面加载成功时将第一个下拉框中的数据加载(使用DOM的createElement创建新的选项使用appendChild逐一添加到对应菜单中)。选择上一级下拉框触发下级菜单的数据加载并且存储上级下拉框的数据。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值