国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生js練習題---第二課(上)

CollinPeng / 584人閱讀

摘要:百度輸入法實現效果百度輸入法主要是切換的判斷條件,一開始我還用點擊次數的奇偶性來判斷,其實直接檢查菜單有沒有顯示即可。簡易年歷實現效果簡易年歷和上一題差不多,只是這次把修改類名換成修改數據而已。

0x1百度輸入法

實現效果:
See the Pen 2-01百度輸入法

主要是切換的判斷條件,一開始我還用點擊次數的奇偶性來判斷-_-||,其實直接檢查菜單有沒有顯示即可。檢查的時候有個小trick,初始狀態菜單的style屬性為空,因為我們接下來要點按鈕顯示,所以把這種情況和style.displaynone的情況歸為一類丟到else里最省事。

0x2點擊Div,顯示其innerHTML

實現效果:
See the Pen 2-02點擊Div,顯示其innerHTML

這里遍歷了div綁上事件,也可以用事件代理來做。

0x3求出數組中所有數字的和

實現效果:
See the Pen 2-03求出數組中所有數字的和

簡單地的表單數據獲取和處理,注意對直接對字符串使用加號就是拼接,想用加法還得手動轉換為數字。

0x4彈出層效果

實現效果:
See the Pen 2-04彈出層效果

經典的彈出層效果,關鍵在CSS上,js只監聽個樣式的顯示與否就ok。

0x5函數傳參,改變Div任意屬性的值

實現效果:
See the Pen 2-05函數傳參,改變Div任意屬性的值

依然是對style對象做文章,既可直接設置style對象,也可以用DOM2的setProperty()方法。同樣,清空style對象里的樣式既可以直接將它置null,也可將其cssText屬性清空。

0x6圖片列表:鼠標移入移出改變圖片透明度

實現效果:
See the Pen 2-06圖片列表:鼠標移入移出改變圖片透明度

還是用js模仿css的hover效果(何苦這樣-_-||),老套路,事件代理+增刪類名搞定。因為事件代理是掛在祖先元素上的,現在就只能監聽mouseovermouseout事件了,因為mouseentermouseleave在光標進出子元素時是不會觸發的。所以這樣看來,mouseovermouseout在子元素上也能觸發這個特點簡直就是為事件代理而生的嘛。

0x7簡易選項卡

實現效果:
See the Pen 2-07簡易選項卡

繼續模仿hover效果,還要加上對另一個div的樣式控制。但是這次光標離開也仍要保持hover的狀態,直到另一選項被hover,所以不能借助mouseout事件、只能遍歷元素移除樣式了,順便也在遍歷過程中取得另一個div要激活的內容。

0x8簡易JS年歷

實現效果:
See the Pen 2-08簡易JS年歷

和上一題差不多,只是這次把修改類名換成修改數據而已。

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

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78809.html

相關文章

  • 原生js習題---二課(下)

    摘要:最后,我們只要在事件處理程序中獲得這個布爾值傳給這幾個函數就可以了,其中,全選框反選鏈接可以從全選框的屬性獲得這個值,而全體的復選框要獲得就得靠遍歷了。 0x1播放列表收縮展開 實現效果 值得注意的一個地方是那個箭頭,我這里只是用了簡單的字符串替換,而原題用了背景圖片移動來實現切換箭頭,但是似乎那樣做會導致整個容器的左右偏移、效果不是很好。 0x2鼠標移過顯示車標 實現效果 這題看起來...

    Little_XM 評論0 收藏0
  • TRY REGEX:正則表達式交互式入門教程 翻譯&解答

    摘要:寫一個正則表達式來測試變量中是否包含字符串。用函數給出不使用字符,但和等價的正則表達式。第十四課標志全局匹配標志第二個常用的標志是全局匹配標志,用字母表示。寫出一個正則表達式來檢驗合法性。非捕獲組的主要用途是給一個組賦予量詞。 TRY REGEX 是一個交互式的正則表達式學習項目項目地址:https://github.com/callumacra...在線地址:http://tryre...

    李義 評論0 收藏0
  • Vue.js學習二課 如何安裝

    摘要:安裝獨立版本我們可以在的官網上直接下載并用標簽引入。國內會保持和發布的最新的版本一致。方法由于安裝速度慢,本教程使用了淘寶的鏡像及其命令,安裝使用介紹參照使用淘寶鏡像。 Vue.js 安裝 1、獨立版本 我們可以在 Vue.js 的官網上直接下載 vue.min.js 并用 標簽引入。 2、使用 CDN 方法 以下推薦國外比較穩定的兩個 CDN,國內還沒發現哪一家比較好,目前還是建議...

    stefanieliang 評論0 收藏0

發表評論

0條評論

CollinPeng

|高級講師

TA的文章

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