百度IFE2018任务--20-21天

Charles 发布于2019-08-26 10:18 / 1894人阅读

原生javascript中，用cssText如何重写内联css
注意：前面的分号是为了兼容ie，加号是为了不清除已有的内联样式
代码：

Element.style.cssText += ";width:100px;height:100px;top:100px;left:100px;"

自定义一个方法来实现追加className的效果代码如下
代码：

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码将追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}

跨浏览器事件处理程序
代码：

var EventUtil = {
   addHandlers: function (element, type, handlers) {
      if (element.addEventListener) {
          // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
         element.addEventListener(type, handlers, false);
      } else if (element.attachEvent) {
          // IE8.0及其以下版本
         element.attachEvent("on" + type, handlers);
      } else {
          // 早期浏览器
         element["on" + type] = handlers;
      }
   },
   removeHandlers: function (element, type, handlers) {
      if (element.removeEventListener) {
         element.removeEventListener(type, handlers, false);
      } else if (element.detachEvent) {
         element.detachEvent("on" + type, handlers);
      } else {
         element["on" + type] = null;
      }
   }
};

点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
代码：

setInterval
参考：https://www.cnblogs.com/evere...
setInterval("fun()",1000); 这句如果写在window.onload的内部，会报错
原因：这种调用fun的写法类似eval语句，是将引号内的代码进行处理执行。这时候，是在全局作用域内找fun()函数，但是window.onload对于window来说属于局部，局部外是找不到局部内的fun()函数的。

分别使用 setTimeout 和 setInterval 实现以下功能：
点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
在动画过程中，按钮的状态变为不可点击
在动画结束后，按钮状态恢复，且文字变成“淡入”
在按钮显示淡入的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
淡入动画结束后，按钮文字变为“淡出”
暂时不要使用 CSS animation （以后我们再学习）
思路：setTimeout方式的关键点是递归，每次递归都会将透明度修改1/10的程度，透明度走到底，递归就返回空值来结束这个过程。总共两个方法，淡入一个，淡出一个，每个方法都有递归。
代码（setTimeout方式）：

var fadeObj = document.querySelector("#fade-obj");
var o = 1;
var fadeBtn = document.querySelector("#fade-btn");

function cha(){
    if(o < 0){
        console.log(o);
        fadeBtn.removeAttribute("disabled");
        fadeBtn.textContent = "淡入";
        return;
    }
    o -= 0.1;
    fadeObj.style.opacity = o; 
    setTimeout(cha,100);
}
function cha2(){
    if(o > 1){
        console.log(o);
        fadeBtn.removeAttribute("disabled");
        fadeBtn.textContent = "淡出";
        return;
    }
    o += 0.1;
    fadeObj.style.opacity = o; 
    setTimeout(cha2,100);
}
fadeBtn.onclick = function(){
    if(fadeBtn.textContent == "淡出"){
        setTimeout(cha,100);
        fadeBtn.setAttribute("disabled","disabled");
    }else{
        setTimeout(cha2,100);
        fadeBtn.setAttribute("disabled","disabled");
    }
}

学习来实现一个帧动画：
基于一个我们提供的图片，实现 IFE2016中Erik笑容的动画
图片地址：http://ife.baidu.com/2016/sta...
注意，依然不要使用 CSS animation，因为我们这里要学习的是使用 JavaScript 来操作 CSS，而不是为了完成这个任务。
思路：分正方向和反方向。用定时器不断执行，每执行一次，就将整体图片向某个方向移动一张图的位置，同时将这个移动的位置对应的数字来修改背景图的纵坐标就可以了。
代码：


        
    IFE ECMAScript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105954.html

百度IFE2018任务--17-18天

摘要：本文章用于记录百度前端技术学院的任务难点。十进制转二进制。第二步将这个数字转换成字符串，分割成数组，每一项都是数字的某一位上的数，再用判断这个数组是否包含为的元素即可，是则打印。代码判断一个数组是否包含一个指定的值，如果存在返回，否则返回本文章用于记录百度前端技术学院的任务难点。十进制转二进制。核心思路：在while循环中，将十进制数字除以2，同时将除以2的余数一次次记录下来，而每...

binta 2019-08-26 10:14 评论0 收藏0
百度ife任务3总结

摘要：在做百度的任务，没能组队成功只好自己做，如果现在还有收人的请务必带上我哦。因为脱离标准文档流，父元素无法自适应高度。问题能不能在不改变结构的情况下仅凭达到列式中间居中自适应宽度的效果在做百度ife的任务，没能组队成功只好自己做，如果现在还有收人的请务必带上我哦。 task3作业地址：https://github.com/emonki/BaiduIfe/tree/...*demo还不会...

xcold 2019-08-30 12:55 评论0 收藏0
从2018百度前端技术学院看代码究竟应该怎么写(1)

任务描述参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写本任务完成的功能为：用户可以在输入框中输入任何内容，点击确认填写按钮后，用户输入的内容会显在您输入的值是文字的右边 IFE JavaScript Task 01 请输入北京今天空气质量：确认填写您输入的值是：尚无录入 (function...

Cobub 2019-08-21 11:43 评论0 收藏0
从2018百度前端技术学院看代码究竟应该怎么写(2)

摘要：任务描述参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑比如空气质量大于进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上污染城市列表第一名福州样例，第二名福州样例，北京上海福州广州成都西安在注任务描述参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示...

sixleaves 2019-08-21 11:42 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

pkwenda 2019-08-29 12:35 评论0 收藏0