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