成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

百度IFE2018任務--20-21天

Charles / 1906人閱讀

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

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

自定義一個方法來實現(xiàn)追加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 標簽內(nèi)，并將 P 標簽中的文字顏色設置成 Li 的背景色
代碼：

            
    
    
        
  • 
        
  • 
        
  • 
        
  • 
        
  • 
        
  • 
        
  • 
        
  •

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

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

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


        
    IFE ECMAScript

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105954.html

相關(guān)文章

  • 百度IFE2018任務--17-18天

    摘要：本文章用于記錄百度前端技術(shù)學院的任務難點。十進制轉(zhuǎn)二進制。第二步將這個數(shù)字轉(zhuǎn)換成字符串，分割成數(shù)組，每一項都是數(shù)字的某一位上的數(shù)，再用判斷這個數(shù)組是否包含為的元素即可，是則打印。代碼判斷一個數(shù)組是否包含一個指定的值，如果存在返回，否則返回 本文章用于記錄百度前端技術(shù)學院的任務難點。 十進制轉(zhuǎn)二進制。核心思路：在while循環(huán)中，將十進制數(shù)字除以2，同時將除以2的余數(shù)一次次記錄下來，而每...

    binta 評論0 收藏0

  • 百度ife任務3總結(jié)

    摘要：在做百度的任務，沒能組隊成功只好自己做，如果現(xiàn)在還有收人的請務必帶上我哦。因為脫離標準文檔流，父元素無法自適應高度。問題能不能在不改變結(jié)構(gòu)的情況下僅憑達到列式中間居中自適應寬度的效果 在做百度ife的任務，沒能組隊成功只好自己做，如果現(xiàn)在還有收人的請務必帶上我哦。 task3作業(yè)地址：https://github.com/emonki/BaiduIfe/tree/...*demo還不會...

    xcold 評論0 收藏0

  • 從2018百度前端技術(shù)學院看代碼究竟應該怎么寫(1)

    任務描述 參考以下示例代碼，補充其中的JavaScript功能，完成一個JavaScript代碼的編寫本任務完成的功能為：用戶可以在輸入框中輸入任何內(nèi)容，點擊確認填寫按鈕后，用戶輸入的內(nèi)容會顯在您輸入的值是文字的右邊 IFE JavaScript Task 01 請輸入北京今天空氣質(zhì)量： 確認填寫 您輸入的值是：尚無錄入 (function...

    Cobub 評論0 收藏0

  • 從2018百度前端技術(shù)學院看代碼究竟應該怎么寫(2)

    摘要：任務描述參考以下示例代碼，頁面加載后，將提供的空氣質(zhì)量數(shù)據(jù)數(shù)組，按照某種邏輯比如空氣質(zhì)量大于進行過濾篩選，最后將符合條件的數(shù)據(jù)按照一定的格式要求顯示在網(wǎng)頁上污染城市列表第一名福州樣例，第二名福州樣例，北京上海福州廣州成都西安在注 任務描述 參考以下示例代碼，頁面加載后，將提供的空氣質(zhì)量數(shù)據(jù)數(shù)組，按照某種邏輯（比如空氣質(zhì)量大于60）進行過濾篩選，最后將符合條件的數(shù)據(jù)按照一定的格式要求顯示...

    sixleaves 評論0 收藏0

  • 百度前端技術(shù)學院2017學習總結(jié)

    摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結(jié)來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發(fā)布的任務（...

    pkwenda 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<