百度IFE2018任務(wù)--20-21天

Charles 發(fā)布于2019-08-26 10:18 / 1901人閱讀

原生javascript中，用cssText如何重寫(xiě)內(nèi)聯(lián)css
注意：前面的分號(hào)是為了兼容ie，加號(hào)是為了不清除已有的內(nèi)聯(lián)樣式
代碼：

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

自定義一個(gè)方法來(lái)實(shí)現(xiàn)追加className的效果代碼如下
代碼：

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //這句代碼將追加的類(lèi)名分開(kāi)
        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;
      }
   }
};

點(diǎn)擊某一個(gè) Li 標(biāo)簽時(shí)，將 Li 的背景色顯示在 P 標(biāo)簽內(nèi)，并將 P 標(biāo)簽中的文字顏色設(shè)置成 Li 的背景色
代碼：

setInterval
參考：https://www.cnblogs.com/evere...
setInterval("fun()",1000); 這句如果寫(xiě)在window.onload的內(nèi)部，會(huì)報(bào)錯(cuò)
原因：這種調(diào)用fun的寫(xiě)法類(lèi)似eval語(yǔ)句，是將引號(hào)內(nèi)的代碼進(jìn)行處理執(zhí)行。這時(shí)候，是在全局作用域內(nèi)找fun()函數(shù)，但是window.onload對(duì)于window來(lái)說(shuō)屬于局部，局部外是找不到局部?jī)?nèi)的fun()函數(shù)的。

分別使用 setTimeout 和 setInterval 實(shí)現(xiàn)以下功能：
點(diǎn)擊按鈕時(shí)，開(kāi)始改變 fade-obj 的透明度，開(kāi)始一個(gè)淡出（逐漸消失）動(dòng)畫(huà)，直到透明度為0
在動(dòng)畫(huà)過(guò)程中，按鈕的狀態(tài)變?yōu)椴豢牲c(diǎn)擊
在動(dòng)畫(huà)結(jié)束后，按鈕狀態(tài)恢復(fù)，且文字變成“淡入”
在按鈕顯示淡入的狀態(tài)時(shí)，點(diǎn)擊按鈕，開(kāi)始一個(gè)“淡入”（逐漸出現(xiàn)）的動(dòng)畫(huà)，和上面類(lèi)似按鈕不可點(diǎn)，直到透明度完全不透明
淡入動(dòng)畫(huà)結(jié)束后，按鈕文字變?yōu)椤暗觥?br>暫時(shí)不要使用 CSS animation （以后我們?cè)賹W(xué)習(xí)）
思路：setTimeout方式的關(guān)鍵點(diǎn)是遞歸，每次遞歸都會(huì)將透明度修改1/10的程度，透明度走到底，遞歸就返回空值來(lái)結(jié)束這個(gè)過(guò)程。總共兩個(gè)方法，淡入一個(gè)，淡出一個(gè)，每個(gè)方法都有遞歸。
代碼（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");
    }
}

學(xué)習(xí)來(lái)實(shí)現(xiàn)一個(gè)幀動(dòng)畫(huà)：
基于一個(gè)我們提供的圖片，實(shí)現(xiàn) IFE2016中Erik笑容的動(dòng)畫(huà)
圖片地址：http://ife.baidu.com/2016/sta...
注意，依然不要使用 CSS animation，因?yàn)槲覀冞@里要學(xué)習(xí)的是使用 JavaScript 來(lái)操作 CSS，而不是為了完成這個(gè)任務(wù)。
思路：分正方向和反方向。用定時(shí)器不斷執(zhí)行，每執(zhí)行一次，就將整體圖片向某個(gè)方向移動(dòng)一張圖的位置，同時(shí)將這個(gè)移動(dòng)的位置對(duì)應(yīng)的數(shù)字來(lái)修改背景圖的縱坐標(biāo)就可以了。
代碼：