DOM基礎3 9 程式設計練習

2021-09-22 10:00:05 字數 771 閱讀 1691

3-9 程式設計練習

小夥伴們,今天我們學習了onblur和onfocus這兩個滑鼠事件,根據gif圖,補充**,實現下列功能:

(1)   當輸入框獲得焦點:

如果輸入框值為空,提示「請輸入您的姓名」

(2)   當輸入框失去焦點:

如果輸入框值為空,提示「使用者名稱不能為空」,並且邊框顏色變為紅色

如果輸入框值不為空,那麼沒有提示文字,邊框顏色是預設顏色

任務根據gif效果圖完成下列步驟:

第一步:通過元素名獲取dom物件的方式,得到輸入框物件以及放置提示文字的元素物件,並用變數進行接收

tips:放置提示文字的元素可以放在乙個行內元素中

第二步:給輸入框繫結獲得焦點事件,當輸入框獲得焦點時,判斷:

如果值為空,輸入框後出現提示文字「請輸入您的姓名」

第三步:給輸入框繫結失去焦點事件,當輸入框獲得焦點時,判斷:

(1)如果值為空,輸入框後出現提示文字「使用者名稱不能為空」,並且將樣式表中的邊框樣式新增給輸入框

(2)如果值不為空,輸入框後的提示文字消失,之前加上的樣式也要去掉

tips:

(1)  在第三步的判斷中,如果值為空,給輸入框加上顏色,那麼當我們輸入框獲取焦點時,要將邊框樣式恢復預設樣式

(2)用設定元素的class屬性這個方法給輸入框加樣式

姓名:

DOM基礎1 30 程式設計練習

1 30 程式設計練習 小夥伴們,今天我們學習了刪除物件屬性的方法,那麼接下來用刪除物件屬性的方法把預設 中p標籤的樣式全部去掉。乙個人的快樂,不是因為他擁有的多,而是因為他計較的少。靜坐常思己過,閒談莫論人非,能受苦乃為志士,肯吃虧不是痴人,敬君子方顯有德,怕小人不算無能,退一步天高地闊,讓三分心...

DOM基礎3 19 程式設計練習

3 19 程式設計練習 小夥伴們,今天我們學習了滑鼠事件,根據gif圖,補充 實現下列功能 1 當滑鼠在帶滾動條的文字框上滑動時,字型顏色變成紅色 2 當滑鼠移出帶滾動條的文字框時,字型顏色變成綠色 3 當滑鼠移動文字框的滾動條時,空白的文字框出現文字 內容滾動了 任務第一步 通過id選取元素的方式...

Java基礎程式設計練習

練習題 輸入乙個3位的整型數,輸出其百位 十位及個位數 public class test1 練習題 判斷乙個數是否是素數 public class test2 if m 1 else if m i 練習題 百分制轉成等級制 public class test3 char ch switch m 1...