Skip to content

visugar/ife2017

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ife2017

写下前面:

本内容是基于2017年百度前端学院所给任务的完成情况写的,涵盖了平时常用到的一些场景,当做小练习,放在这里作为记录及查阅所用。参考资料部分的链接也来自百度前端学院。

注:下面代码皆为个人理解所给出的解决方案,难免有些地方不准确,仅作参考所用!

介绍:

前三个学院任务中不涉及其他框架等内容,全部使用原生的HTML、CSS、JS来实现。其中小薇学院为HTML和CSS部分,斌斌学院为JS基础部分,耀耀学院则为基础综合学院,最后糯米学院属于涉及框架或第三方库的综合性学院。

1. 小薇学院:


2. 斌斌学院:

  • task11 - 零基础JavaScript编码(一)

    任务说明:初步明白JavaScript的简单基本语法,如变量、函数,了解JavaScript的事件,了解JavaScript中的DOM

  • task12 - 零基础JavaScript编码(二)

    任务说明:学习JavaScript中的if判断语法,for循环语法,学习JavaScript中的数组对象,学习如何读取、处理数据,并动态创建、修改DOM中的内容

    • 源码地址
    • 预览地址
    • 小结:用for循环对数据进行遍历,同时对数据进行过滤,最后输出结果
  • task13 - 零基础JavaScript编码(三)

    任务说明:接触一下JavaScript中的高级选择器,学习JavaScript中的数组对象遍历、读写、排序等操作,学习简单的字符串处理操作

    • 源码地址
    • 预览地址
    • 小结:根据要求实现了基本功能,其中用到了一个排序方法对数据进行排序,且动态生成元素
  • task14 - 基础JavaScript练习(一)

    任务说明:模拟一个队列,队列的每个元素是一个数字,初始队列为空,给出不同的按钮对队列进行操作。

    • 源码地址
    • 预览地址
    • 小结:可将input中输入的数据从左侧插入,从右侧插入,删除队列中的数值可以从第一个位置开始,也可以从最后一个位置开始。同时利用事件委托来完事点击某数值时删除该元素。
  • task15 - 基础JavaScript练习(二)

    任务说明:基于上一任务,对输入的数字进行限制(10-100),且最多只能输入60个数字,当删除某数字时,弹出被删除的数值,队列中元素的高度等于输入的数值大小。

  • task16 - 基础JavaScript练习(三)

    任务说明:基于上一任务,实践JavaScript数组、字符串相关操作

  • task17 - JavaScript和树(一)

    任务说明:学习树这种数据结构的基本知识,在页面中展现一颗二叉树的结构,提供一个按钮,显示开始遍历,点击后,以动画的形式呈现遍历的过程,当前被遍历到的节点做一个特殊显示,每隔一段时间再遍历下一个节点

  • task18 - JavaScript和树(二)

    任务说明:将上节任务的二叉树变成了多叉树,且每个节点都带有内容,增加了查询框,以动画形式查询节点内容与输入框中内容是否一致,找到则给出特殊标识。

    • 源码地址
    • 预览地址
    • 小结:本任务中只使用了前序遍历来以动画形式遍历多叉树,同时在setTimeout中进行查询。

3. 耀耀学院:

  • task301 - 表单(一)单个表单项的检验

    任务说明:加强对JavaScript的掌握,熟悉常用表单处理逻辑

  • task302 - 表单(二)多个表单项的动态校验

    任务说明:根据上一任务添加多个表单,表单获取焦点时,填写规则显示在该输入框下方,验证失败则变成红色输入框,红色描述文字显示在输入框下方,验证结果正确则为绿色,点击提交按钮时验证全部输入框。

  • task303 - 表单(三)联动

    任务说明:根据给出的效果图,切换单选框的不同选项时,下方的表单随之切换,一个select的选中项改变,则其后的select下拉框内容也改变。

  • task304 - 听指令的小方块(一)

    任务说明:练习JavaScript在DOM、字符串处理相关知识,练习对于复杂UI,如何进行数据机构建模。

    • 源码地址
    • 预览地址
    • 小结:实现了一个类似期盼的格子空间,每个格子用两个数字可以定位,给出不同的按钮,根据按钮上的命令,使红色小方块移动,但同时小方块不能超出格子间。(画方格是个力气活~)
  • task305 - 听指令的小方块(二)

    任务说明:在上一任务的基础上,添加更多更复杂的命令,并增加相应的动画。

  • task306 - UI组件之浮出层

    任务说明:综合HTML、CSS、JavaScript实现布局功能,实现一个付出曾是的UI组件。

    • 源码地址
    • 预览地址
    • 小结:浮出层默认在屏幕正中,滚动时,浮出层位置不随之改变,浮出层意外则为遮罩,任意点击浮出层外区域则默认为关闭浮出层,关闭按钮也可以关闭浮出层。同时还实现了浮出层的拖拽功能,按住浮出层可将其拖到任意位置。
  • task307 - UI组件之排序表格

    任务说明:将给出的数据插入到通过JS动态生成的表格中,并给出升序降序按钮,使其实现无刷新表格排序功能。

    • 源码地址
    • 预览地址
    • 小结:其中三角按钮的也是力气活!其他的不多说,见代码和预览效果。

4. 糯米学院:

  • task401 - 有趣的鼠标悬浮模糊效果

    任务说明:实现文字的流光渐变动画,背景图需要进行模糊处理,实现按钮边框的从中间到两边扩展开的效果

    • 源码地址
    • 预览地址
    • 小结:使用background-image:-webkit-linear-gradient()实现背景渐变的效果,利用-webkit-background-clip: text;把背景颜色渐变的效果应用到文本的文字上,通过中间内容的追加元素实现边框的伸展效果。
  • task406 - 自定义checkbox, radio样式

    任务说明:深入了解html、label标签,了解CSS边框、背景、伪元素、伪类(注意和伪元素区分)等属性的设置,了解CSS中常见的雪碧图,并能自己制作使用雪碧图

    • 源码地址
    • 预览地址
    • 小结:通过label与input的关系,以及伪类:checked,追加元素::after来实现checkbox,radio的自定义图标,同时也可以利用背景图片实现同样的功能,原始的input标签需要隐藏。
    • 参考资料:
  • task408 - 自定义网页右键菜单

    任务说明:了解js中的oncontextmenu事件,了解如何获取鼠标位置,了解如何实现页面屏蔽右键菜单

    • 源码地址
    • 预览地址
    • 小结:利用js中的oncontextmenu事件,阻止网页中的默认右键菜单,自定义自己需要的菜单
    • 参考资料:
  • task409 - 使用CSS实现折叠面板

    任务说明:深入理解html中radio的特性,深入理解CSS选择器以及伪元素的使用

    • 源码地址
    • 预览地址
    • 小结:使用input的radio单选框特性结合css中的伪元素,再加上label的合作,实现面板折叠的效果,纯css及html完成,且只能显示一个面板。
    • 参考资料:
  • task410 - 正则表达式之入门

    任务说明:掌握JavaScript正则表达式编写规则,了解JavaScript中的正则表达式的特殊字符,了解JavaScript提供的正则表达式相关方法,能用正则表达式做一些简单文本或者数字校验

    • 源码地址
    • 预览地址
    • 小结:使用正则表达式测试是否为正确的手机号,其中用到了select的onchange事件,regExp是根据实际生活中手机号开头来写的。然后是判断一个输入的字符串是否有相邻 的重复单词,要考虑到每个单词的边界,然后input表单用到了list及datalist特性,即同时可输入也可以下拉选择,在给定的词中还有自动补全的功能。
    • 参考资料:
  • task412 - CSS3饼状loading效果

    任务说明:学习和掌握水平垂直居中布局,学习和掌握利用HTML和CSS构造简单规则图形,学习和掌握和使用CSS3动画新特性

  • task413 - CSS3实现3D 轮播图

    任务说明:了解CSS的定义、概念、发展简史,掌握CSS选择器的含义和用法,实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式,理解 css 3d 和 景深的原理

    • 源码地址
    • 预览地址
    • 小结:通过CSS3的animation实现轮播动画,只实现了初步功能,后续要接着完善。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published