本文共 1961 字，大约阅读时间需要 6 分钟。

效果展示和需求分析

效果展示展示了一个完整的登录模态框界面，其中包括登录表单、背景遮罩和关闭按钮。模态框支持以下功能：

需求分析系统需求如下：

代码分析HTML代码

登录我的账号
   
    
    
账号登录
    
    
        
     用户名：        
         
    
    
    
        
     登录密码：        
             
         
    
    
    登录账号    
    关闭
   
   

JS代码

var eyeState = document.querySelector('#eye-state');var pswInput = document.querySelector('#psw');var login = document.querySelector('.login');var loginBg = document.querySelector('#bg');var loginForm = document.querySelector('form');var closeBtn = document.querySelector('.close-btn');var eyeFlag = 0;eyeState.onclick = setEye;login.onclick = goLogin;closeBtn.onclick = leaveLogin;loginForm.children[0].addEventListener('mousedown', dragForm);loginForm.onselectstart = function(e) {    e.preventDefault();};function setEye() {    if (!eyeFlag) {        eyeState.className = 'open';        pswInput.type = 'text';        eyeFlag = 1;    } else {        eyeState.className = 'close';        pswInput.type = 'password';        eyeFlag = 0;    }}function goLogin() {    loginBg.style.visibility = 'visible';    loginForm.style.display = 'block';    login.style.display = 'none';}function leaveLogin() {    loginBg.style.visibility = 'hidden';    loginForm.style.display = 'none';    login.style.display = 'block';}function dragForm(e) {    var x = e.pageX - this.parentNode.offsetLeft;    var y = e.pageY - this.parentNode.offsetTop;    document.addEventListener('mousemove', move);    this.addEventListener('mouseup', function() {        document.removeEventListener('mousemove', move);    });    function move(event) {        loginForm.style.left = event.pageX - x + 'px';        loginForm.style.top = event.pageY - y + 'px';    }}

分析

转载地址：http://neqf.baihongyu.com/