實現掘金登錄框中熊貓狀態的改變案例

今天登錄掘金的時候，發現輸入手機號和密碼的時候，上面的小熊是會有不會形態的。於是登錄上掘金的第一件事情就是把這個小案例寫了下。我是用的最簡單的方法來寫的。有更加簡潔的方法可以在下面評論出來，大家一起進步。

1. 知識點彙總

1.1 結構

• input框的placeholder是作爲默認提示的

1.2 樣式

• 熊貓定位在盒子上方 定位官方文檔學習

1.3 JS交互

思路：

• 當手機號的input框獲取到焦點的時候，讓‘舉手’的熊貓顯示；
• 當密碼的input獲取焦點的時候，讓‘閉眼’的熊貓顯示；
• 當input框都失去焦點的時候讓‘趴着’熊貓顯示；

如何實現圖片的顯示：

我們在寫CSS樣式的時候，讓圖片默認是display:none 隱藏。給圖片加一個類名，在這個類名下加上display:block顯示的樣式。這樣後期想讓誰顯示就直接讓他加上這個類名即可。

使用JS獲取到的input和img的索引問題：

• ‘趴着’的圖片索引是‘0’
• 手機號的input索引是0 ---- ‘舉手’的圖片索引是‘1’
• 密碼的input索引是1 ---- ‘閉眼’的圖片索引是‘2’

2. 代碼實現

需求：熊貓的狀態改變

• 當輸入手機號的時候熊貓的狀態是‘舉手’；
• 當輸入密碼的時候，熊貓的狀態是‘閉眼’；
• 在其他狀態熊貓都是‘趴着’狀態

2.1 結構

<form>
  <div class='imageBox'>
      <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" alt="" class='active'>
      <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" alt="">
      <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" alt="">
  </div>
  <div class="ipt">
       <input type="text" placeholder="輸入手機號">
       <input type="password" placeholder="輸入密碼">
  </div>
</form>

2.2 樣式

* {
    margin: 0;
    padding: 0;
}

form {
    width: 300px;
    margin: 100px auto;
    border: 1px solid #d6d7d5;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    padding: 20px 0;
}

form .imageBox img {
    display: none;
    width: 100px;
    height: 100px;
    position: absolute;
    top:-76px;
    left:91px;
}

form .imageBox img.active {
    display: block;
}

form .ipt input {
    font-size: 15px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    padding: 5px;
    color: #333;
}
form .ipt input:nth-child(2){
    margin-bottom: 0;
}

2.3 JS交互

let imageBoxs = document.querySelectorAll('img'),
    ipts = document.querySelectorAll('input');

for (let j = 0; j < ipts.length; j++) { 
    ipts[j].onfocus = function () {  //獲取焦點做的事情
       get(j+ 1);                   //索引對應相應的圖片
    };
    ipts[j].onblur = function () {  //失去焦點做的事情
        clear();
    }
}
function get(index) {
  for (let i = 0; i < imageBoxs.length; i++) {
      imageBoxs[i].className = '';       //先清除所有的類名
  }
  imageBoxs[index].className = 'active';  //爲相應的圖片加上類名
}
function clear(index) {
   for (let i = 0; i < imageBoxs.length; i++) {  
      imageBoxs[i].className = '';         //清除所有類名
  }
  imageBoxs[0].className = 'active';        //讓‘趴着’熊貓加類名
}

3. 實現效果

4. 總結

這個案例其實就是對JS中函數、input事件的一個簡單應用，沒有什麼難度，但是最重要的是編程思想的養成，善於總結我們寫過的每一個案例。加油！