zoukankan      html  css  js  c++  java
  • 百度前端学院---热身任务攻略

    百度前端学院—热身任务攻略


    第一关: 一笔画出折线,穿过图中的9个点,折线个数尽量少。
    答案:需要少于四线三折

    寻找第二关的地址:按F12 发现一个空的div 里面有一段被编码的字符串base64 ,复制出这段字符串,在控制台输入 atob(“字符串”)——window.atob是一个解码的函数,回车得到一个地址,复制在地址栏的#/后面.
    也可以直接在控制台输入: window.location = “http://”+ window.locaton.host + window.location.pathname + atob($(‘div.text-panel’).text().trim())

    window.location.host:获取网址
    window.location.pathname:获取路径


    第二关: 上帝为你关上一扇门,却打开了一扇,我们需要找到窗的高度,才能爬出窗外
    一看便知,需要输入正确密码(window的高度),但整个页面无法点击。

    首先:老套路,F12,第一种方法:在控制台输入window.innerHeight,可以得到我们窗口的高度(不同的浏览器高度不一样),然后在DOM里面修改其显示在桌面的数值,使得屏幕上面显示窗口的高度值==window.innerHeight。第二种方法:按F12,直接在DOM里面修改其显示在桌面的数值,使得屏幕上面显示窗口的高度值=521。


    第三关:百度前端学院(IFE),面向大学生的前端技术学习平台,请在底部填写css,将彩色IFE字母移动到指定位置
    这道题目没有什么特殊的地方,考察 CSS 基础,一个像素一个像素调。

    transform:scale(放大或者缩小的倍数) rotate(旋转的角度) transform:scaleX(-1):保持自身的大小,绕X轴旋转
    然后点击绿色的well done!进入下一关


    第四关:在输入框中填入代码,控制小球穿过障碍物,至少吃到3个星星,吃的星星越多,得分越高。

    输入框里面有提示api,要使用箭头函数(=>),这是ES6里面的内容,直接调用api,传入参数(小球的坐标)就可以控制小球的滚动,前期试了一下,发现当小球滚动的时候,还会再出现两颗星星,可以知道这两颗星星是延迟出现的,故我们的小球先延迟一会在滚动。
    首先自己得设计路线,不同的路线,代码不相同:按下F12,打开调试工具,找到小球的位置(style=left:-10px;top:46px);然后在style样式的调试工具里面控制小球的left和top值,按照你先前想好的路线跑一下,记录其转折点的left和top值—–就是后面小球的坐标值。
    ball.at(0, 46, ball=>ball.wait(1700));
    ball.at(82,46,ball=>ball.turnRight());
    ball.at(82,130,ball=>ball.turnLeft());
    ball.at(130,130,ball=>ball.turnRight());
    ball.at(130,240,ball=>ball.turnRight());
    ball.at(82,240,ball=>ball.turnLeft());
    ball.at(82,355,ball=>ball.turnRight());
    ball.at(30,355,ball=>ball.turnLeft());
    ball.at(30,362,ball=>ball.turnLeft());
    ball.at(170,362,ball=>ball.turnRight());
    ball.at(170,470,ball=>ball.turnRight());
    ball.at(30,470,ball=>ball.turnBack());
    ball.at(370,470,ball=>ball.turnLeft());
    ball.at(370,360,ball=>ball.turnLeft());
    ball.at(270,360,ball=>ball.turnRight());
    ball.at(270,241,ball=>ball.turnLeft());
    ball.at(180,241,ball=>ball.turnRight());
    ball.at(180,235,ball=>ball.turnRight());
    ball.at(220,234,ball=>ball.turnLeft());
    ball.at(220,130,ball=>ball.turnRight());
    ball.at(270,130,ball=>ball.turnLeft());
    ball.at(270,50,ball=>ball.turnRight());
    ball.at(365,50,ball=>ball.turnRight());
    ball.at(365,50,ball=>ball.turnRight());
    ball.at(365,105,ball=>ball.turnLeft());
    ball.at(465,105,ball=>ball.turnLeft());
    ball.at(465,15,ball=>ball.turnRight());
    ball.at(545,15,ball=>ball.turnRight());
    ball.at(545,100,ball=>ball.turnLeft());
    ball.at(620,100,ball=>ball.turnRight());
    ball.at(620,185,ball=>ball.turnRight());
    ball.at(575,185,ball=>ball.turnLeft());
    ball.at(575,475,ball=>ball.turnLeft());


    详情参考:有道云笔记
    github地址

  • 相关阅读:
    ruby_debug笔记
    来自Neil
    rails 在迭代里的那些条件
    rails 表单嵌套
    rails present? 和 blank? 对于bool 值
    泛泛
    设计模式——策略模式
    Spring容器初始化过程
    Spring之ResourceLoader加载资源
    Spring之ClassPathResource加载资源文件
  • 原文地址:https://www.cnblogs.com/linewman/p/9918386.html
Copyright © 2011-2022 走看看