小伙伴們,根據(jù)所學(xué)知識(shí),使用JS實(shí)現(xiàn)案例中的人人網(wǎng)評(píng)論功能
效果圖:
溫馨提示:完成任務(wù)后,請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致,如一致,恭喜您,你已經(jīng)掌握此技能。
任務(wù)安排:
一、定義刪除節(jié)點(diǎn)函數(shù)removeNode。
提示: 1. 函數(shù)接受一個(gè)參數(shù),及需要參數(shù)的節(jié)點(diǎn)。
二、定義贊分享函數(shù)praiseBox。
提示: 1.接受2個(gè)參數(shù),一個(gè)是分享內(nèi)容的容器,一個(gè)是點(diǎn)擊的元素。 2.獲取顯示分享?xiàng)l數(shù)結(jié)果的節(jié)點(diǎn)、當(dāng)前分享數(shù)當(dāng)前點(diǎn)擊元素的文本。 3. 如果當(dāng)前點(diǎn)擊酸霧文本為“贊”,增加贊,并更新相關(guān)元素的內(nèi)容,反之,減少贊。
注意:自定義屬性的讀取和寫入。
三、定義格式化日期函數(shù)getTime。
提示: 1.new一個(gè)日期對(duì)象。 2.分別調(diào)用獲取年月日時(shí)分的方法,保存在相應(yīng)變量。 3. 拼接成特定格式的日期字符串。
注意:月份從0開始,對(duì)小于10的數(shù)字前面補(bǔ)0。
四、定義發(fā)表評(píng)論函數(shù)replayBox。
提示: 1.獲取輸入框內(nèi)容。 2.獲取評(píng)論列表根元素。 3. 創(chuàng)建新元素并設(shè)置相關(guān)屬性。 4. 拼接新元素的innerHTML并寫入。 5. 把新元素評(píng)添加到論列表根元素。 6. 清空輸入框,并使其失去焦點(diǎn)
注意:拼接HTML時(shí),調(diào)用時(shí)期格式化函數(shù)獲取當(dāng)前時(shí)期。
五、定義贊回復(fù)函數(shù)praiseReply。
提示: 1.接受1個(gè)參數(shù),是回復(fù)節(jié)點(diǎn)的根元素。 2.獲取當(dāng)前贊總數(shù),以及我的贊數(shù)。 3.根據(jù)我是否贊過(guò),更新根元素顯示狀態(tài)。
六、定義操作回復(fù)函數(shù)operateReply。
提示: 1.接受一個(gè)參數(shù),為點(diǎn)擊的元素。 2.如果元素內(nèi)容是“回復(fù)”,則贊開輸入框,并更新輸入框的value。 3. 如果是刪除,則刪除回復(fù)內(nèi)容的根節(jié)點(diǎn)。
注意:輸入框事件的手動(dòng)觸發(fā)。
七、遍歷每個(gè)分享li,綁定事件。
1)在li上綁定點(diǎn)擊事件代理
提示: 1.獲取觸發(fā)元素,取得class。 2.根據(jù)class調(diào)用不同的函數(shù)。
注意:IE下event對(duì)象存在window下。
2)綁定輸入框事件
提示: 1.獲取輸入框元素。 2.綁定onfocus,展開輸入框。 3.綁定onblur, 收起輸入框。 4.綁定onkeyup, 實(shí)時(shí)計(jì)算字?jǐn)?shù),更新按鈕狀態(tài)。
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)