百度IFE2018任務--20-21天

Charles 發布于2019-08-26 10:18 / 1902人閱讀

原生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

GPU云服務器云服務器 ife 百度云會員免費領取7天定時任務與觸發任務工作流任務和節點任務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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