百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

排序
  • 发布时间
  • 浏览量
  • 点赞数
  • 当我们讨论动画时,我们在讨论什么 由于任务已经截止,无法发布新笔记,原计划另开一坑的color篇现也更新到这里。 transform篇 基本完成了IFE的动画库任务(一),内心是崩溃的。JS补间动画的原理的确很简单,但在实现过程中,才意识到以前用的成熟的动画库,做了多少的工作。 JS动画实现原理 对于多数成熟的动画库,你只需要提供动画的末状态 end 与动画时长 duration,它就能帮你绘制一段缓动动画,其原理很是单纯,大体可以拆成以下几步: 根据你提供的末状态 end,获得元素对应的初状态 begin 通过初末状态,获得状态的变化量 change 定义一个变量来保存动画进行到的时间,如…

    5787次浏览31评论
  • 说实话,一开始看到这个任务内心是相当懵比的——主要就是有两个点一下子没有头绪,但说实话,只要get到这两点的思路,这个任务也就完成了一半了。接下来俺就具体展开一下: 1. 如何渲染颜色选取面板 讲道理我不知道为什么前端技术学院给了这么个示意图,因为这个图根本就取不到所有颜色啊喂! 为什么呢,颜色通常都是由三种成分(so我们最后确定颜色其实就是用三个变量)定义的,因此在我们通常用三维空间来描述颜色模型,RGB,HSL,以及此次任务中我用到的HSV都是这样,弄清楚颜色模型,也就知道该用什么方法来渲染了,下文将详细阐释: RGB(参考维基词条:三原色光模式) 当前表示RGB的主流方法是用三个0-2…

    928次浏览40评论
  • 问题描述 任务五:听指令的小方块(二)中有实现转动过渡效果的要求。如直接转动小方块,小方块的四个角在转动过程中必定会突出棋盘格,影响美观。若能在转动前将给小方块加个圆角 border-radius: 50%,旋转动画后再改回 border-radius: 0,岂不妙哉~ 一. 用Animation实现 既然圆角需要先从0到50%,再从50%到0,首先想到的就是可以实现往返效果的animation了。代码如下CSS //朝上的情况下左转的动画 @keyframes tl { 0% { border-radius: 0; transform: rotate(0deg); }…

    1463次浏览100评论
  • 裁剪器功能分解2017-03-30 22:59

    刚看到任务时完全懵了,不知道从何下手,在参考了别人的代码后自己完成简单的裁剪器,记录下每个功能点的分析。 绘制背景 要求选择图片后,没有填充图片的区域用透明背景填充。存在这个需求,肯定就要用到canvas了。原理其实挺简单的,就是在canvas上绘制黑色方块,只要绘制时的位置不同即可,白色部分是没有绘制的区域。 下面在一个宽为 600,高为 360 的容器内,绘制宽度为 40 的方块。 const canvas = document.querySelector('#bg') const ctx = canvas.getContext('2d') // canvas 宽高 const width…

    756次浏览30评论
  • 树的简介 栈、队列、链表等数据结构,都是顺序数据结构。而树是非顺序数据结构。直观地,树型结构是以分支关系定义的层次结构。 基础概念 树的定义 树(Tree)是n(n>=0)个结点的有限集。在一颗非空树里: 有且只有一个根节点(root) 当n>1时,其余结点可分为m(m>0)个互不相交的有限集T1,T2,T3,...Tm,其中每一个集合本身又是一棵树,并且称为根的子树(Subtree)。 (a) 图只有一个根节点A ,(b)A是根节点,13个子节点,13个子节点分成3个互不相交的子集:T1={B,E,F,K,L},t2={D,H,I,J,M};T1,T2和T3都是根A的子树…

    1773次浏览72评论
  • CSS选择器详解2017-03-25 18:33

    选择器的种类有很多,可以到 w3cschool 去看看了解一下。也可以在 慕课网 中实践一下。 一、上下文选择器 标签选择器 <style> h1 {font-size: 16px;} p {color:red;} </style> 代码中的h1和p就是选择器,他们是选择器里面最常用的一种,叫做标签选择器。我们可以直接通过标签元素来指定需要添加样式的位置。 如果我们需要为多个标签添加同一种样式时,我们可以把它们组合在一起,每个标签选择器用“,”隔开,如下: <style> h1,h2,h3 { font-weight: bold; …

    1396次浏览5502评论
  • 今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句“丧心病狂”也。但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景,不然它就真的是丧心病狂,然后我们就可以各回各家了。 innerText 引用MDN,Node.textContent上的一段话: Internet Explorer 引入了 element.innerText,目的是相似的,不过有下面几点不同之处: textContent 会获取所有元素的内容,包括<script> 和 <style> 元素,然而 IE 专有属性 innerText 不会。…

    1607次浏览30评论
  • 绘制人物关系图2017-03-24 15:55

    step 1 从 http://www-personal.umich.edu/~mejn/netdata/ 选择一份关系数据下载 step 2 用 gephi 对数据进行处理,布局,分类后导出成 gexf 格式。 快速入门 详细教程 布局 step 3 通过echarts.dataTool解析gexf数据; echarts.js并没有内置dataTool,需要自己下载并引入 echarts.dataTool Object {version: "1.0.0", gexf: Object}echarts.dataTool.gexf Object {parse: t(e), proto:Object…

    789次浏览10评论
  • CSS 与 JS 注意事项2017-03-23 16:01

    框架- 不推荐 Reference JS 手机端对ES5的特性已经全部都支持的很好了 对手势的处理,zepto中有几个很有用的事件,swipe,swipeLeft,right,up,down,一类的,还有tap,我们可以看下zepto的源码:zepto,自己写一个swipe的基类,徒手写个下托刷新禁止页面惯性反弹的代码,这里给个思路,比如我们检测touchmove的位置快到达页面【或者容器】底部的时候,阻止touchmove,做容器或者页面translate移动,再在下部埋一个loading,touchend之后再做缓动回复,应该普通前端都能做到。 swipe.js 做幻灯用的,但是我使用sw…

    1100次浏览91评论
  • 以前做动画的时候,常常会卡顿, 猜,大致的原因可能是, 浏览器绘制页面的时候, 反应不过来,所以会出现卡顿。汗!!,然后,今天通过这个任务, 了解到了requestAnimationFrame ,通过百度才知道具体的原因。下面是我自己的理解,如果有不对的地方,大家即时指出来,方便我即时的修改。 浏览器绘制页面的时候, 主要是通过两个线程去绘制页面的。 一个是主线程, 一个排版线程。 主线程 通常情况下, 主线线程的负责工作是: 运行javascript 、 计算HTML元素的css样式 、 把页面的元素绘制成一个 或者 多个位图。然后, 把这些位图 移交给 排版线程 (百度了下位…

    985次浏览40评论
  • 这篇笔记是根据小薇导师提供的参考资料完成的附上原网址:https://css-tricks.com/centering-css-complete-guide/ 1.水平居中 for inline, inline-block, inline-table, inline-flex…… (前提:该元素的父元素为块级元素) element { text-align: center; } for block-level elements(前提:该元素的width值确定) element { margin: 0 auto; } for 两个及以上的块级元素需要在一行中居中显示 p…

    1158次浏览110评论
  • 计算的 时间复杂度(最差、平均、和最好性能),依据列表(list)的大小(n)。一般而言,好的性能是O(n log n),且坏的性能是O(n^2)。对于一个排序理想的性能是O(n)。仅使用一个抽象关键比较运算的排序算法总平均上总是至少需要O(n log n)。 插入排序(insertion sort) 插入排序应该算是最简单和容易理解的排序算法。它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。具有n个元素时它需要经过n-1趟排序。对于p = 1到p = n-1趟,插入排序保证从位置0到位置p上的元素为已排序状态。它就是基于这个事实来排序的。 f…

    1384次浏览75评论
  • 掌握盒模型的概念 CSS 盒模型: margin-border-padding-content Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域,内边距是透明的。 Content(内容) - 盒子的内容,显示文本和图像。 重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。. 高度和宽度的计算 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边…

    792次浏览20评论
  • 任务二的内容是这样的:任务描述参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <body> <h3>污染城市列表</h3> <ul…

    1289次浏览292评论
  • 1、position属性 css中定位的属性为position属性,属性值和功能如下 属性值 含义 特点 static 静态定位 默认定位方式,相当于无定位 relative 相对定位 定位元素仍位于标准文档流中,相对于自身进行偏移 absolute 绝对定位 定位元素脱离标准文档流,若有已定位祖先原始则相对于距离最近的祖先元素偏移,无已定位祖先元素则相对于根节点html偏移 fixed 绝对定位中的固定定位 定位元素相对于窗口进行偏移 PS:关于static:对于下列设置中由于box1设置的static属性值相当于box1未定位;所以box2的虽然嵌套在box1中,但是box1不是…

    698次浏览11评论
  • 写在开头: 本人Js小白一枚!虽然近两年看了不少关于Js的文档,例如最近在系统地看一本书叫:《JavaScript高级程序设计(第3版)》,但由于工作内容基本都是围绕着html和css,很少需要去写Js,所以知识点基本也是一边看一边忘的状态。 颇为忐忑的发表了这篇笔记,里面很多应该都是最基本应该知道的,只是觉得这些最基本的曾经学习过的方法在实际写代码的时候却一点想不起来,实在是不应该。所以干脆列举出来,毕竟好记性不如烂笔头! 如果下面有理解错误的,望大家能指出,多谢! 1.判断值为数字类型的方法 需要考虑数字输入的合法性 可以使用 !isNaN(val) 来进行判断value值是否位数字类…

    1518次浏览266评论
  •   本任务主要是利用css完成三栏式布局。关于三栏式布局,常规情况下,可以使用float实现,也可以使用relative来实现。 但是,如果要求左右两层定宽,中间层的宽度随浏览器窗口宽度变化而变化,这种情况下,就适合使用圣杯和双飞翼布局。通过对圣杯及双飞翼布局学习之后,我认为两种布局的主旨是在html结构中,使中间的主体层位于左右两层的前面。任务效果图:   基本思路及区别:1.两种布局的基本构思为:首先让中间层100%宽度占满同一高度的空间,在左右两层被挤出中间层所在区域时, 使用margin-left的负值将左右两个层拉回与中间层同一高度的空间,接下来调整左右两层到指定位置, 最后使用中…

    2005次浏览133评论
  •   《CSS3圆饼loading效果》作为糯米学院中的进阶任务,目的主要是让学员通过完成任务,掌握border-radius属性的使用以及旋转动画的设置。在已经完成鼠标悬浮效果任务之后,相对来说本任务要简单很多。以下是总结。   任务分解:该任务要达到的效果。如网页中显示情况,可将任务分解为两个小任务: 1.制作四分之三圆环并旋转;2.制作圆饼,圆饼内有两种颜色,分别交替旋转扩大其扇形区域(从0deg到到360deg),以达到圆饼loading效果。   通过完成任务,使用到如下一些重要属性: 1.制作圆环,使用伪元素,使用border(包括其transparent值);2.制作圆饼过程中,使…

    831次浏览10评论
  • 任务九 - 正则表达式之入门 任务链接源码仓库 相关知识点回顾 直接量字符 字符 匹配 字符和数字字符 自身 o NUL字符(u0000) t 制表符(u0009) n 换行符(u000A) v 垂直制表符(u000B) f 换页符(u000C) r 回车符(u000D) 字符类 将直接量字符单独放进方括号([])内就组成了字符类。一个字符类可以匹配它所包含的任意字符。字符类可以使用连字符来表示字符范围。|字符 | 匹配||:-----|:-----||[...] | 方括号内的任意字符||[^...] | 不在方括号内的任意字符||. | 除换行符和其他Unicode行终止符之外的任…

    584次浏览00评论
  • CSS备忘录2017-03-16 13:39

    css基本内容 HTML<!DOCTYPE>声明标签 1.定义和用法: < !DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前。< !DOCTYPE>声明不是HTML标签;它指示web浏览器关于页面使用哪个HTML版本进行编码的指令在HTML 4.01中< !DOCTYPE>声明引用DTD,因为HTML 4.01基于SGML。DTD规定了标记语言的规则,这样浏览器可以正确地呈现内容。HTML5不基于SGML,所以不需要引用DTD 2.各版本的声明: HTML5: < !DOCTYPE><…

    918次浏览10评论