任务三十七：UI组件之浮出层

最新推荐文章于 2024-08-09 21:30:00 发布
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量124 收藏
点赞数
文章标签： javascript ui 前端 ViewUI
任务三十七：UI组件之浮出层

 

面向人群：
有一定JavaScript基础
难度：
低

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

  • 练习综合运用HTML、CSS、JavaScript实现局部功能
  • 练习对于代码的抽象与封装
  • 为第四阶段的RIA任务做准备

任务描述

  • 参考如下设计图，实现一个浮出层的UI组件实现
  • 浮出层的中心默认在屏幕正中
  • 当浮出层显示时，屏幕滚动时，浮出层始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置。或者禁止页面在有浮出层出现时滚动
  • 当浮出层显示时，点击浮出层以外的部分，默认为关闭浮出层。可以实现一个半透明的遮罩来挡住浮出层外的部分
  • 浮出层的样式、内容和逻辑尽量解耦
  • 提供使用JavaScript控制浮出层展现和关闭的接口
  • 浮出层的窗口大小可以是一个默认固定值，也可以是随内容变化而自适应变化，也可以是通过接口参数进行调整，自行根据自己能力进行选择
  • 有能力的同学可以实现浮出层的拖拽移动浮出窗口位置以及拖拽边缘来放大缩小浮出窗口的功能

任务注意事项

  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 可以合理选择使用其它第三方类库，但不建议

任务协作建议

  • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
  • 各自完成任务实践
  • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
  • 相互讨论，最后合成一份组内最佳代码进行提交
任务三十六：听指令的小方块（四）
面向人群：
有一定JavaScript基础
难度：
高

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

  • 练习JavaScript在DOM、字符串处理相关知识
  • 利用JavaScript实践寻路相关算法

任务描述

  • 如图，新增元素“墙”，墙是正方形不可进入、越过的区域
  • 新增修墙的指令，BUILD，执行指令时，会在当前方块面对的方向前修建一格墙壁，如果被指定修墙的地方超过边界墙或者已经有墙了，则取消修墙操作，并调用浏览器的console.log方法打印一个错误日志
  • 新增粉刷的指令，BRU color，color是一个字符串，保持和css中颜色编码一致。执行指令时，如果当前方块蓝色边面对方向有紧相邻的墙，则将这个墙颜色改为参数颜色，如果没有，则通过调用浏览器的console.log方法，打印一个错误日志
  • 尝试写一段代码，实现在空间内修建一个长长的五颜六色的墙或者有趣的图形
  • 新增一个按钮，可以在空间内随机生成一些墙
  • 增加一个指令：MOV TO x, y，会使得方块从当前位置移动到坐标为x，y的地方，移动过程中不能进入墙所在的地方，寻路算法请自行选择并实现，不做具体要求

任务注意事项

  • 实现功能的同时，请仔细学习JavaScript相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 建议不使用任何第三方库、框架
  • 寻路算法可以参考已有代码，但不建议直接引用现成的算法文件，最起码自己敲一遍
  • 有余力的同学，可以实现多种寻路算法，并在MOV TO指令中增加算法的选择功能，比如MOV TO x,y BY xxx（算法标示）

任务协作建议

  • 如果是各自工作，可以按以下方式：
    • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
    • 各自完成任务实践
    • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
    • 相互讨论，最后合成一份组内最佳代码进行提交
  • 如果是分工工作（推荐），可以按以下模块切分
    • 墙相关的功能
    • 碰撞检测
    • 新指令的解析
    • 各种寻路算法，可以每人实现一个

在线学习参考资料

D_SJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【WEB】百度前端技术学院任务汇总
WHUZXQ的博客
09-15 1784
以下是在空闲时间对JS以及CSS知识的巩固与联系。具体代码详见：https://github.com/whuzxq/baiduAcademic糯米学院部分任务：task1：有趣的鼠标悬浮模糊效果http://47.95.234.87/ProBaidu/task1/task1.htmltask2：css3饼状loading效果http://47.95.234.87/ProBaidu/task11/ta
UGUI的漂浮效果
一叶子的博客哦
12-11 2288
/// <summary>/// 让一个UI随着鼠标的移动而进行rotation的变化/// </summary>public class MyTitleWindow : MonoBehaviour{    public Vector2 range = new Vector2(20f, 20f);/// range:UI移动的范围    public Transform m...
UI组件之浮出层
weixin_30314631的博客
08-13 126
这次的任务是浮出层，查了网上的一些内容后大概了解了一些，有的比较复杂，有的比较简单，在这里做一个总结与梳理（简单一点的~）,如果有不当或错误之处，希望大家多多指教： 首先，我们的最终效果是这样的： 以下都是一些关键代码，做了一些简化的 先把html结构放出来： <div class="test">这是测试内容这是测试内容这是测试内容</div&gt...
python之ActionChains方法列表（转）
weixin_40669227的博客
06-23 1160
python之ActionChains方法列表 方法列表： click(on_element=None) ——单击鼠标左键 click_and_hold(on_element=None) ——点击鼠标左键，不松开 context_click(on_element=None) ——点击鼠标右键 double_click(on_element=None) ——双击鼠标左键 drag_and_drop(source, target) ——拖拽到某个元素然后松开 drag_and_drop_by_offset(so
IFE-TASK37（任务三十七：UI组件之浮出层）
HangMine的博客
10-18 309
前言： 百度前端技术学院，任务三十七：UI组件之浮出层 知识点： 1）通过display:none来显示或隐藏浮出层和遮罩层,遮罩层的z-index位于浮出层与背景层之间,样式为半透明 2）利用pageX,pageY,offsetLeft,offsetTop,offsetWidth,offsetHeight,clientWidth,clientHeight等属性,来确定
【ife】任务三十七：UI组件之浮出层
筱葭的博客
01-11 592
window.onload = function() { document.getElementsByTagName("button")[0].onclick = function() { document.getElementById("box").style.left = "50%"; document.getElementById("box").style.top = "50%";
任务四十一：UI组件之日历组件（二）
weixin_34324081的博客
04-21 65
任务四十一：UI组件之日历组件（二） 面向人群：有一定基础的同学难度：中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。 课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的...
pyqt 获取 UI 中组件_一文读懂！iOS系统组件的设计规范全解！
weixin_39859220的博客
10-24 287
一说到组件，大部分初级设计师和中级设计师的脑海里只会蹦出弹窗、Toast及操作列表等具体的概念，没有一套属于自己的组件分类体系，这样对于视觉设计、交互设计或产品设计的系统学习来说都是不利的。iOS14概念设计iOS官方设计指南在介绍组件时是按照组件的属性来分类的。组件的中文翻译名称可能会有很多种，并没有一个权威、准确的中文命名。设计师在设计前只需要清楚每个组件名对应的组件是什么就可以了。...
对话框，日历控件，拖动层
02-28
在IT领域，尤其是在Web开发中，用户界面的设计与交互至关重要，而"对话框"、"日历控件"和"拖动层"是常见的UI组件，它们极大地提升了用户体验。接下来，我们将深入探讨这些知识点。 首先，对话框是网页中一种常见的...
Linux 平台基于 Qt5 的网速浮窗.zip
04-29
在Linux平台上，开发一款基于Qt5的网速浮窗是一项技术性强且实用的任务。Qt5是一个跨平台的应用程序开发框架，广泛应用于桌面、移动和嵌入式设备，它提供了丰富的图形用户界面（GUI）组件和工具，使得开发者可以便捷...
Android:仿QQ 发表说说/上传照片 弹出框（修复bug）
05-15
在Android开发中，模仿QQ应用的功能是常见的学习和实践任务之一。这个项目专注于实现发表说说和上传照片的弹出框功能，这是社交应用中必不可少的元素。通过这个项目，开发者可以深入理解Android UI设计、事件处理...
FloatingActionButton:简易操作按钮菜单android
05-10
浮動操作按钮（FloatingActionButton）是Android设计支持库中的一种UI组件，它是一个圆形的按钮，通常位于屏幕底部或侧面，用于表示主要的操作或者最常见的功能。这个组件的设计理念是提供一个突出、易于发现的交互...
ext学习之路
04-18
- **Window**：弹出窗口组件，用于模态对话框或浮窗。 #### 表单组件 - **FormPanel**：表单容器，管理表单的布局与验证。 - **CheckBox**：复选框组件，用于多项选择。 - **ComboBox**：下拉组合框，提供数据选择...
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 502
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
【Vue3】图片未加载成功前占位
菜就多练
08-08 274
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 226
社交媒体分享链接时的预览图片和内容
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions
zzyp1927314的博客
08-05 502
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1023
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值