<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body,.popupBox{
width: 100%;
height: 100%;
}
.popupBox{
opacity: 0;
transition: 500ms;
background: rgba(0,0,0,0.5);
padding-top: 100px;
}
.popup{
width: 300px;
height: 200px;
border: 1px solid #eee;
transition: all 1s;
transform: scale(0);
margin: 0 auto;
background: #fff;
text-align: center;
padding-top: 70px;
border-radius: 20px;
}
.popup input{
width: 50px;
height: 50px;
border: 1px solid #000000;
text-align: center;
}
</style>
</head>
<body>
<button class="pop">按钮</button>
<div class="popupBox">
<div class="popup">
<input maxlength="1" type="number" />
<input maxlength="1" type="number" />
<input maxlength="1" type="number" />
<input maxlength="1" type="number" />
</div>
</div>
<script type="text/javascript">
//按钮
var pop = document.querySelector(".pop");
//大背景
var popupBox = document.querySelector(".popupBox");
//装input盒子
var popup = document.querySelector(".popup");
//获取input
var ipt = popup.querySelectorAll("input");
pop.addEventListener("click",function(){
popupBox.style.opacity = 1;
})
popupBox.addEventListener("transitionend",function(){
popup.style.transform = "scale(1)";
})
for(let i=0;i<ipt.length;i++){
ipt[i].onkeyup=function(){
this.value=this.value.replace(/^(.).*$/,'$1');
if(i<ipt.length-1){
ipt[i+1].focus();
}
}
}
</script>
</body>
</html>
网友评论