JSFiddle - React, Tailwind, and code Playground

by Mo Qiao

HTML

<div class="popup-password">
        <div class="line"></div>
        <div class="password-dialog">
            <div class="title center">请输入交易密码</div>
            <div class="wrap">
                <div class="number center">5000 元</div>
                <div class="password">
                    <input type="tel" id="password" maxlength="6">

                    <div class="password-view" id="password-view">
                        <span>
							<i class="circle"></i>
						</span>
                        <span>
							<i class="circle"></i>
						</span>
                        <span>
							<i class="circle"></i>
						</span>
                        <span>
							<i class="circle"></i>
						</span>
                        <span>
							<i class="circle"></i>
						</span>
                        <span>
							<i class="circle"></i>
						</span>
                    </div>
                </div>
                <div class="bottom-btn ">
                    <a class="btn iden-code-disable  close-popup" id="ppCancel">取消</a>
                    <a class="btn btn-blue " id="ppEnter">确定</a>
                </div>
            </div>
        </div>
    </div>

CSS

html{
  font-size: 10px;
  font-family: 'Helvetica Neue',Helvetica,"Hiragino Sans GB", "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;
}
.popup-password {
  background-color: rgba(0, 0, 0, 0.7);
  width: 375px;
  height: 627px;
  margin: 0 auto;
  position:relative;
}
.popup-password .password-dialog {
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  border-radius: 0.5rem;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  width: 84%;
  height: 23rem;
}
.popup-password .password-dialog .title {
  height: 5.8rem;
  line-height: 5.8rem;
  font-size: 2rem;
  position: relative;
  text-align: center;
}
.popup-password .password-dialog .title:after {
  content: '';
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #e7e7e7;
  position: absolute;
  left: 0;
  bottom: 0;
}
.popup-password .password-dialog .wrap {
  padding: 0 3rem;
  text-align: center;
}
.popup-password .password-dialog .number {
  height: 5.2rem;
  line-height: 5.2rem;
  font-size: 2rem;
  color: #54a6ea;
}
.popup-password .password-dialog .password {
  height: 4rem;
  line-height: 4rem;
  position: relative;
}
.popup-password .password-dialog .password input {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  height: 50px;
  z-index: 3;
  line-height: 10px;
  font-size: 16px;
  letter-spacing: 21px;
  opacity: 0;
}
.popup-password .password-dialog .password .password-view {
  top: 0;
  left: 50%;
  margin-left: -100px;
  position: absolute;
  height: 4.2rem;
  width: 200px;
  font-size: 0;
  -webkit-box-shadow: inset 0 0 0 1px #e7e7e7;
  -moz-box-shadow: inset 0 0 0 1px #e7e7e7;
  box-shadow: inset 0 0 0 1px #e7e7e7;
  background-color: #fff;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  border-radius: 0.6rem;
  -webkit-background-clip:...

JavaScript

function popupPassword(cancelCB, enterCB) {
    var passwordPar = document.querySelector('.password-dialog');
    var password = document.querySelector('#password');
    var pas = document.querySelector('.password-view').querySelectorAll('span');
    var enter = document.querySelector('#ppEnter');
    var cancel = document.querySelector('#ppCancel');
    var passwordValue;

    /**
     * 初始化密码输入框
     */
    function init() {
        for (var i = pas.length - 1; i >= 0; i--) {
            pas[i].className = '';
        }
        password.value = '';
    }

    /**
     * 输入控制逻辑，同步原点的添加和删除
     */
    function passInput() {
        passwordPar.onclick = function () {
            password.focus();
        };
        password.oninput = function () {
            var length = this.value.length;
            for (var i = pas.length - 1; i >= 0; i--) {
                pas[i].className = '';
            }
            for (var j = length - 1; j >= 0; j--) {
                pas[j].className = 'active';
            }
        };
    }

    /**
     * 点击取消按键要执行的动作
     */
    function passCancel() {
        cancel.onclick = function (e) {
            e.stopPropagation();
            // doSomeThing when cancel has been click
            if (cancelCB) {
                cancelCB();
            } else {
                console.log('cancel');
            }
        };
    }

    /**
     * 点击确定案件要执行的动作
     */
    function passEnter() {
        enter.onclick = function (e) {
            e.stopPropagation();
            passwordValue = password.value;
            if (passwordValue.length === 6) {
                if (enterCB) {
                    enterCB.call(enterCB,passwordValue);
                } else {
                    console.log(passwordValue);
                    init();
                }
            } else {
                alert('密码长度小于六位，请重新输入');
            }
        };
    }

    passInput();
    passCancel();
    passEnter();
}
        popupPassword(null, function...