Js查漏补缺-05

0x00 精灵轮播图-淘宝

    使用js更改li的backgroundPosition属性，达到分割一张图，并作为不同块的background的目的；

  <script>
      let lis = document.querySelectorAll('li');
      for (let i = 0; i <12; i++){
          lis[i].style.backgroundPosition = '0 -' + 44 * i + 'px';
      }
  </script>

0x01 输入框-京东

     使用onfocus()和onblur()来改变输入框内的文本颜色及value

  <script>
    let input1 = document.querySelector('input');
    input1.onfocus = () => {
        if(input1.value === '奥利奥饼干'){
            this.value = '';
        }
        input1.style.color = '#333';
    }
    input1.onblur = () => {
        if(input1.value === ''){
            this.value = '奥利奥饼干';
        }
        input1.style.color = '#999';
    }
  </script>

0x02 密码输入框-新浪注册

  <script>
     let ipt = document.querySelector('.ipt');
     let message = document.querySelector('.message');
     ipt.onblur = () =>{
         if (this.value.length < 6 || this.length >16){
             message.className = "message wrong";
             message.innerHTML = "您输入的位数不对，要求3~16位";
         } else {
             message.className = "message wrong";
             message.innerHTML = "您输入的位数不对，要求3~16位";
         }
     }
  </script>