WebAPI的几个小案例分享

分享几个WebAPI的几个实用小案例.
1.密码框输入隐藏和显示开关案例.
HTML框架部分

CSS部分
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}

    .box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }
    
    .box img {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 24px;
    }

JS部分
    
  1.事件源
    var eye = document.querySelector('#eye');
    var pwd = document.querySelectorAll('#pwd')[0];
    var flag = false; (因为我每次都点击的是这个eye ，我也不知道到底现在是打开的还是关闭的)
   2.注册事件  3.事件处理函数
eye.onclick = function () {
    if(!flag){
        pwd.type = 'text'
        eye.src = 'images/open.png';
        flag = true
    }else{
        pwd.type = 'password'
        eye.src = 'images/close.png';
        flag = false
    }
    
    // this
}